React - Props와 State

0.  React에서는 왜 변수를 두고 State를 사용해 값을 관리할까?

• State 값이 변경되면 리렌더링이 발생하기 때문에 변화된 값이 화면에 바로 반영됨!

1. State

• 내부 컴포넌트에서 생성, 활동하고 데이터를 변경할 수 있음
• 구성 요소가 마운트될 때 기본값으로 시작한 다음 시간이 지남에 따라 변이를 겪음
• 컴포넌트는 내부적으로 자신의 state를 관리하지만 초기 상태를 설정하는 것 외에는 자식 state를 다룰 수 없음
• state는 비공개 데이터

2. Props

• 외부 컴포넌트(부모 컴포넌트)에서 상속 받는 데이터, 데이터를 변경할 수 없음
• 구성요소의 구성이며 옵션임
• 자식 컴포넌트에서 변경할 수 없음

3. state와 props의 차이점

	state	props
컴포넌트 안에서  변경 가능	가능(가변 데이터)	불가능(불변의 데이터)
데이터 관리	컴포넌트 안에서 관리	컴포넌트에 전달
부모 컴포넌트에서 변경 가능	가능	불가능
자식 컴포넌트에서 변경 가능	불가능	가능

4. State와 Props의 공통점

• props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체
• 렌더링 결과물에 영향을 주는 정보를 가지고 있음

 

 

출처 : https://dev-cini.tistory.com/8