[TIL-20210607] React State & Props

Pizzahand·2021년 6월 8일
0

TIL

목록 보기
11/28
post-thumbnail
post-custom-banner

State

  • 변수 대신 사용하는 데이터 저장공간
  • 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
  • useState()를 사용해서 만든다 => 구조분해할당으로 생성

state에 데이터를 저장하는 이유

  • 웹이 app처럼 동작하게 만들기 위해서
  • state는 변경되면 HTML이 자동으로 재렌더링 된다 => HTML이 새로고침 없이 스무스하게 변경됨

Props

  • Props는 변하지 않는 외부로부터 전달받은 값으로 컴포넌트의 속성(property)를 의미한다.
  • React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
  • props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.
  • props는 읽기 전용
    Props는 변하지 않는 외부로부터 전달받은 값이기 때문에 함부로 변경될 수 없는 읽기 전용(read-only) 객체가 되었다.

props 사용법

  1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
  2. props를 이용하여 정의된 값과 속성을 전달한다.
  3. 전달받은 props를 렌더링한다.
profile
재밌게 코딩하고 싶은 개발자!
post-custom-banner

0개의 댓글