State / Props

기멜·2021년 11월 20일
0

React

목록 보기
8/24

State 와 Props의 대해서 알아보자

State / Props

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

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

State

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

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

Props

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

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

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

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글