props와 state 둘 다 일반 자바스크립트 객체로서 렌더링 결과물에 영향을 주는 정보들을 갖고 있다. 이 둘의 차이점은 다음과 같다.

props

props는 부모 컴포넌트로부터 자식 컴포넌트로 마치 매개변수와 같이 전달되는 자바스크립트 객체이다. 자식 컴포넌트 입장에서는 값을 바꿀 수 없는 데이터라고 생각해도 된다.

state

state는 로컬 변수처럼 컴포넌트 안에서 관리되는 자바스크립트 객체이다. 즉 컴포넌트 안에서 변경이 가능한 데이터이다.

render를 통해서 지속적으로 동기화를 해 주어야 하는 데이터가 있는 경우, 그 데이터를 state로 표현하면 더 좋다. 하지만 하나의 컴포넌트 안에서 사용하는 state의 개수는 최소한으로 줄이고, 웬만하면 상위 컴포넌트로 이동하는 것이 좋다. 예를 들어 setInterval() 등의 Timer API를 사용해서 시계를 만들 때 시, 분, 초에 대한 state를 모두 해당 컴포넌트에 만드는 것은 좋지 않은 상황이다. 이럴 때는 상위 컴포넌트로 setState()를 넘긴 후에 props로 받아오는 것이 더 좋다.

만약 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고 싶을 때

부모 컴포넌트의 prop으로 함수를 내리는 방법을 많이 사용한다.