[React] Props와 State의 차이

1. Props와 State의 차이

---

Props:

먼저 Props는 Properties의 줄임말로 State와의 간단한 차이는 변할 수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고 이 props는 상속받은 컴포넌트 내에서 수정이 불가능하다. 리액트에서는 부모 > 자식의 일방향성 상속이라는 특징 때문이다. props는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로 'this.props,xxx'로 나타낸다.  

 

 - 읽기 전용

 - 부모 요소에서 설정하는 것

 - 초깃값과 자료형의 유효성 검사가 가능

 

 

State:

State는 컴포넌트의 상태를 나타내며, props와 반대로 변할 수 있다. 컴포넌트의 내부에서 선언되기 때문이다. 이러한 state는 외부에 공개하지 않고, 컴포넌트가 스스로 관리한다. state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들(리스트에서 선택된 값, 체크박스에서 체크된 값, 텍스트 박스의 텍스트 등등)

 

 - 상태에 따라 변화하는 것

 - 직접 변경 가능

 - state가 변경되면 컴포넌트를 다시 렌더링 해야함

 - 외부에는 비공개, 컴포넌트 스스로가 관리해야하는 것 

 

 

 

 

 

참고문헌

1) 쿠지라 히코우즈쿠에, 윤인성(역), 『모던 자바스크립트 개발자를 위한 리액트 프로그래밍 』, 위키북스, 2017, pp183~188

2) Props and State in React Native explained in Simple English, codeburst.io, Mar.17.2018, https://codeburst.io/props-and-state-in-react-native-explained-in-simple-english-8ea73b1d224e , (접속일자 : 2020-01-17)