[React] props

1. 정의

프로퍼티(properties)의 약자로 인자를 뜻하며, 리액트에서는 상위 컴포넌트에서 하위 컴포넌트로 읽기 형태의 값을 전달할 때 쓰인다.

 

 

 

2. 사용

props의 사용방법은 다음과 같다.

import React, { useState } from 'react';
import Child from './child';

function App() {
    const [typeA, setTypeA] = useState("");
    ...

    return (
    	{/* 자식 컴포넌트에게 props를 전달한다 */}
        {/* state를 통한 값을 자바스크립트의 형태로도 전달할 수 있다 */}
    	<Child typeA={typeA} typeB="typeB">
    );
}

export default App;

import React from 'react';

function Child(props) { // props 예약어를 통해 인자를 받는다
	return (
    	{/* 자바스크립트 문법을 통해 props에 해당되는 typeA 인자를 받아 출력한다 */}
    	<div>{ props.typeA }</div>
            {/* 인자가 Object 타입인 경우 세부적인 인자를 받는 것 또한 출력이 가능하다 */}
            <div>{ props.typeB.subA }</div>
        <div>{ props.typeB.subB }</div>
    );
}

export default Child;

또한 props 예약어를 거치지 않고 간단한 방식으로 구현하는 것도 가능하다.

import React from 'react';

function Child({ typeA, typeB }) { // 객체 형태를 통해 props에 해당되는 인자를 지정 지정하여 받을 수 있다
	return (
    	{/* props 키워드를 생략하고 바로 인자를 받아 출력할 수 있다 */}
    	<div>{ typeA }</div>
            <div>{ typeB.subA }</div>
        <div>{ typeB.subB }</div>
    );
}

export default Child;

---

단, 리액트 공식문서에서는 props는 읽기 전용으로 모든 컴포넌트의 자체 props를 수정하면 안된다고 표기하고 있다.

즉, 순수 함수의 형태로 props를 다뤄야 하므로 클래스 및 함수 내부에서 입력값의 변경이 없어야 한다.

// 입력값을 바꾸지 않고 항상 동일한 입력값에 대하여 동일한 경과를 반환한다
function sum(a, b) {
  return a + b;
}

// 자신의 입력값을 변경하기 때문에 순수함수에 해당되지 않는다
function withdraw(account, amount) {
  account.total -= amount;
}

---