[React] State vs Props

리엑트에서 데이터를 다룰 때 크게 State와 Props이라는 개념을 이용한다. 이번 포스팅에서는 이 둘이 뜻하는 바와 차이점에 대해 알아보자. 

 

State란?

The state is a built-in React object that is used to contain data or information about the component. 

 

state는 컴포넌트에 대한 데이터나 정보를 담는 리엑트 내장 객체다.

 

Props란?

Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

props는 프로퍼티의 줄임말이다. 읽기 전용 컴포넌트이며 태그의 특성 값을 저장하는 객체이다. 그리고 HTML 특성처럼 동작한다. props를 이용하면 다른 컴포넌트로 데이터를 넘겨줄 수 있다. 함수의 아규먼트와 비슷한데, 함수에 마치 아규먼트가 전달되듯이 컴포넌트에 전달된다. 

 

State를 사용해야 할 경우 vs Props를 사용해야 할 경우

Props

• 불변의 데이터
• 변경불가
• 외부(부모) 컴포넌트에서 상속받는 데이터이며, 데이터를 변경할 수 없음

 

State

• 가변 데이터
• 내부 컴포넌트에서 생성하고 활동하고, 데이터를 변경할 수 있음.