[React] State & Props

State

: 유저가 발생시키는 이벤트에 대해 변하는 값으로 내부에서 변화하는 값이라고 볼 수 있습니다.

사용 예시

주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됩니다.
• React state는 상태 변경 함수 호출로 변경해야 합니다.

---

Props

: 외부로부터 전달받은 값입니다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      // 속성 값 정의
      <Child text={"I'm the eldest child"}/>
      <Child text2={"I'm the second child"}/> 
      <Child />
    </div>
  );
}
// props 전달
function Child(props) { 
  return (
    <div className="child">
    //전달받은 props 렌더링
      <p>{props.text}</p>  
      <p>{props.text2}</p> 
    </div>
  );
}

Props의 단계

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의합니다.
2. props를 이용하여 정의된 값과 속성을 전달합니다.
3. 전달받은 props를 렌더링합니다.

Props의 특징

• 외부로부터 전달받은 값으로, 웹 앱에서 해당 컴포넌트가 가진 속성을 의미합니다.
• JS의 함수와 클래스로, props를 전달인자처럼 전달받아 어떻게 렌더링 되는지 React 엘리먼트를 반환합니다. 전달인자의 역할을 함으로 부모 컴포넌트로부터 전달받아야합니다.
• 객체 형태입니다.
• 읽기 전용이며 함부로 변경될 수 없습니다.