State / Props

State 와 Props의 대해서 알아보자

State / Props

- 데이터를 다룰 때 사용되는 개념입니다.

Class Component 와 function Component 두 가지로 나뉩니다.
하지만 저희는 여기에서 function Component 만을 쓰겠습니다.

State

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

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

Props

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

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

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없습니다.