[React] props란?

 

props 개념  

React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다.

 

props가 어떤식으로 코드에서 사용되는지 간단한 예제를 통하여 알아보도록 하겠습니다.  아래의 예제는 "hello, hayan”을 렌더링하는 예시입니다.

const Welcome = (props) => {
    return <h1>hello, {props.name} </h1>
}

ReactDOM.render(
    <Welcome name="hayan" />,
    document.getElementById('root')
);

// 출력 결과
hello hayan

 

위의 예시는 다음과 같은 일들이 일어납니다.

1. <Welcome name=“hayan” /> 엘리먼트로 ReactDOM.render()를 호출합니다.

2. React는 {name: 'hayan'}를 props로 하여 Welcome 컴포넌트를 호출합니다.

3. Welcome 컴포넌트는 결과적으로 <h1>hello, hayan</h1> 엘리먼트를 반환합니다.

4. React DOM은 <h1>hello, hayan</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

 

---

props는 읽기 전용

이전에는 setProps, replaceProps로 props를 변경할 수 있었지만, 이제는 더 이상 사용되지 않습니다. 따라서, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다.  모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

 

---

props와 state의 차이

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

	props	state
상위 구성 요소에서 초기 값을 가져올 수 있습니까?	예	예
상위 컴포넌트로 변경할 수 있습니까?	예	아니요
Component 내에서 기본값을 설정할 수 있습니까?*	예	예
Component 내부에서 변경할 수 있습니까?	아니요	예
자식 컴포넌트의 초기값을 설정할 수 있습니까?	예	예
자식 구성 요소에서 변경할 수 있습니까?	예	아니요

 

- props와 state 둘 다 JS 객체입니다.

- props와 state 모두 변경시 render를 trigger합니다.

- 구성요소가 동일한 props 및 state 조합에 대해 다른 출력을 하는 경우 잘못된 작업을 수행하고 있는 것입니다.

 

 

References

react.org

lucybain.com/blog

github.com/uberVU