React State & Props

State(상태)

개념

• 컴포넌트 내부에서 변할 수 있는 값
• useState()의 반환값은 배열
  const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값)
• State를 지정하는 목적은 state 변수에 담긴 데이터를 컴포넌트 간에 공유하기 위함
  • 리액트에서는 state 값을 Controlled Component(state의 영향 하에 있는 컴포넌트)에 자동으로 리렌더링해준다.
• state는 최소화하는 것이 좋다

지정 여부

• 부모 -> 자식 컴포넌트로 전달될 수 있으면 x
• 시간이 지남에 따라 변하지 않으면 x
• 컴포넌트 내의 state나 props로 계산될 수 있으면 x

위치

• 영향을 받는 컴포넌트들의 공통 부모 컴포넌트
  • 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다 (top-down)

Props(속성)

• 상위 컴포넌트에서 하위 컴포넌트로 전달하는 값
• 함수의 인자처럼 사용
• 객체 형태
• read-only, immutable(단방향, 하향식 데이터 흐름 원칙)
• <Child key={value} /> 또는 <Child>value</Child> 구문으로 Child 컴포넌트에 전달
  • 각각 {props.key} 또는 {props.children}으로 조회
  • 구조분해 할당으로도 조회 가능(const Component = ( {key} ))
  • <Child>value</Child> 안에 value를 하나 이상 전달하면 배열의 형태로 전달

---

참고:

-코드스테이츠 유어클래스
-Learn useState In 15 Minutes - React Hooks Explained