[React] state, props의 차이점에 대해서 간략하게 알아보자!

 

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이며 외부(state)에서 상속 받는 데이터이며, 데이터를 변경할 수 없다.

state: props의 값에 따라서 내부의 구현에 필요한 데이터들이며 내부에서 생성하고 활동하며, 데이터를 변경할 수 있다.

 

 

예를 들어 컴포넌트를 하나 생성했습니다.

해당 컴포넌트의 기본적인 동작을 변경하고 싶을때 사용자에게 제공하는 것은 태그안 속성에서 props라는 것을 문법적으로 제공하는걸 통해서 사용자는 컴포넌트를 조작할 수 있다. 즉 props는 컴포넌트의 사용자에게 중요한 정보이다.

또한 컴포넌트의 내부적으로 사용하는 것들은 state라고 합니다. 즉 state는 컴포넌트는 사용자에게 보여지지 않는 부분을 나타냅니다.

요약하자면 사용하는 쪽과 그것을 구현하는 쪽을 철저하게 격리시켜서 양쪽에 편의성을 각자 도모하는 것이 좋은 리액트를 만들 수 있습니다.

※ props, state 중 어떤걸 사용해도 화면에 출력되는 내용은 완전이 같지만, props는 데이터를 사용자에게 노출되는 부분에 직접 적는것이 아닌, state를 통해 참조했다는 차이가 있다. 즉 사용자가 알 필요가 없는 데이터를 내부에서 은닉(캡슐화)을 한다는 점이다.