State 란

컴포넌트 내부에서 선언되고, 컴포넌트 내에서 변경이 가능한 데이터.

내부에서 선언되므로 외부에 공개되지 않고 컴포넌트가 스스로 관리하며, 컴포넌트의 상태 값을 나타내기 위한 것들로 주로 사용된다.

• 상태에 따라 변화하는 것(가변 데이터)
• 직접 변경 가능
• state 가 변경되면 컴포넌트는 다시 렌더링됨
• 외부 비공개, 컴포넌트 스스로가 관리함

props

컴포넌트 외부에서 전달되는 데이터,
해당 컴포넌트에서는 읽기 전용으로 사용된다.

부모 컴포넌트로부터 props 를 받아 사용할 수 있다. 따라 상속받은 컴포넌트 내에서는 수정이 불가능하다.

• 읽기 전용(불변의 데이터)
• 부모 요소에서 설정되어, 부모로부터 전달되는
• 초깃값과 자료형의 유효성 검사가 가능

차이점

• props 는 외부(부모 컴포넌트)에서 상속받는 데이터이며, 데이터를 변경할 수 없으며,
  state 는 내부(컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있다.

• 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이점이 있다.
  props 는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면,
  state는 (함수 내에서 선언된 변수처럼) 컴포넌트 안에서 관리된다.

참고자료_1