state와 props

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

props

컴포넌트는, 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다.

props는 컴포넌트에서 컴포넌트로 전달하는 데이터다. 컴포넌트의 속성으로, 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정 가능하다.

state

state는 컴포넌트 내부의 동적 데이터를 의미한다. props는 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있다.

state를 사용하는 방식에는 컴포넌트의 종류에 따라 2가지가 있다. 클래스형 컴포넌트에서는 컴포넌트 자체가 state를 지니는 방식으로 사용한다. 함수형 컴포넌트에서는 useState라는 함수, Hook을 통해 사용한다.

여러 개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하기 위해서 조상 컴포넌트에 state를 정의한다. 조상 컴포넌트가 props를 사용하여 자식 컴포넌트에 state를 다시 전달함으로 서로 동기화한다.

두 컴포넌트 간 state 값을 동기화하는 일, state를 공유하는 일은, 그 state 값을 필요로 하는 컴포넌트 간의 가장 가까운 공통 조상 컴포넌트로 state를 끌어올림으로 가능하다. 👉 여러 개의 컴포넌트 간의 state를 동기화시키기보다, 공통 조상으로 끌어올려 하향식 데이터 흐름을 이용하자.

Lifting State Up - React Docs

The Data Flows Down - React Docs