* props
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
* state
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포너트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다.
* state와 props의 차이점은?
props와 state는 일반 Javascript객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다.
props는 커모넌트에 전달되는 반면 state는 컴포넌트 안에서 관리됩니다.
* 리렌더링 발생 조건
리렌더링 조건에는 3가지가 있습니다.
첫번째, props 변경
두번째, State 변경
세번째, 부모 컴포넌트 렌더링
1️⃣ Props 변경
Props 업데이트가 일어나면 리렌더링을 한다.
Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.
부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고,
모든 하위 컴포넌트에 대해 리렌더링이 발생한다.
2️⃣ State 변경
State 업데이트가 일어나면 리렌더링을 한다.
리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.
리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.
3️⃣ 부모 컴포넌트 렌더링
부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.
Props와 같은 원리이다.
출처: https://tooo1.tistory.com/580 [개발자 퉁이리:티스토리]
