React | State와 Props

State와 Props

state 와 props (properties)는 JavaScript의 객체이다.
두 객체 모두 렌더링 결과물에 영향을 주는, 속성을 가진 데이터이다.

 

 

State와 Props의 차이점

• state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 데이터.
  자식 컴포넌트 입장에서 보면 쓰기 전용이라고 할 수 있다.
• props : (함수의 매개변수처럼) 상위 계층의 컴포넌트에서 자식 컴포넌트로 전달되는 데이터.
  자식 컴포넌트 입장에서 보면 읽기 전용이라고 할 수 있다.

 

 

어떤 데이터가 state가 되어야 할까?

1. 부모로부터 props를 통해 전달되는가?
2. 시간이 지나도 변하지 않는가?
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?

위 질문에 하나라도 yes가 나오면 state가 아니다.
다르게 말해보면, 아래의 데이터가 state가 되어야한다.

 

1. 부모로부터 props를 통해 전달되지 않는다.
2. 변화되는 값이다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산할 수 없다.

 

 

 

 

어떤 컴포넌트가 어떤 state를 가져야 할까?

React는 항상 상위 => 하위 컴포넌트로 내려가는 단방향 데이터 흐름을 따른다.
이 특성을 이용해서, 어떤 컴포넌트가 어떤 state를 가질지 헷갈릴 때 체크해볼 수 있다.

 

 

1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다

2. 컴포넌트 계층 구조에서 최상위에 위치한 공통 오너 컴포넌트(common owner component)를 찾는다.
(특정 state가 있어야 하는 모든 컴포넌트들의 최상위에 있는 컴포넌트).

3. 최상위에 위치한 공통 오너 컴포넌트가 state를 가져야 한다.

4. state를 소유할 적절한 컴포넌트를 찾지 못하였다면, 해당 state를 소유하는 컴포넌트를 새로 만들어서 최상위의 공통 오너 컴포넌트에 추가한다.

---

본 글은 2021년 8월 26일 개인 블로그(velog)에 작성된 글입니다.