React, State와 Props

앞서 두 번의 프로젝트에서 프론트엔드로 참여해 react를 이용한 웹 서비스를 구축하였다. 하지만 막상 면접에서 state와 props에 대한 것을 묻자 머리가 하얘지는 나를 발견할 수 있었다. 숱하게 사용했었던 state와 props지만 정확히 알고있다고 할 수 있을까? 정리가 필요한 시점이다.

react의 데이터

리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉜다. props와 state가 그것을 말한다. 간단히 말하면 props는 상위, 부모 컴포넌트로 부터 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트는 값을 받아오기만 할 뿐, 수정할 수 없다.
반면, state는 컴포넌트 내부에서 선언하는 값이다.

props

props는 Properties의 줄임말로, State와의 간단한 차이는 변할 수 없다는 것에 있다. 정확히는 상속받은 자식 컴포넌트 내부에선 변경할 수 없다. props는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로 보통 'this.props.~~'로 나타낸다.

• 읽기전용
• 부모 요소에서 설정
• 초기값과 자료형의 유효성 검사 가능

state

State는 컴포넌트의 상태를 나타낸다. props와 반대로 수정이 가능한데 이는 컴포넌트 내부에서 선언되기 때문이다. 이러한 state는 외부에 공개되지 않고 컴포넌트 내에서 관리하게 된다. setState()를 사용해 값을 재선언 하는 방식으로 값의 수정이 이루어진다.

• 상태에 따라 변화하는것
• 직접 변경 가능
• state가 변경되면 리랜더링
• 외부에는 비공개, 컴포넌트 스스로 관리