props

바냐·2023년 6월 28일
0
post-thumbnail

props란?

props는 properties의 줄임말이다.
리액트에서 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터이다.
때문에 컴포넌트내에서 데이터가 보관되면 이 데이터는 수정되지 않고 보존되야하는 법칙이 성립된다.

  • 리액트는 단방향 데이터 흐름이므로 부모객체 -> 자식객체로 props값을 전달하며, props값을 받은 자식객체는 이 부분들을 렌더링한다.

<정리>

  1. props는 부모컴포넌트가 자식컴포넌트에게 주는 값이다.
  2. 단방향성 특징을 가지고 있으므로, 자식 컴포넌트가 부모 컴포넌트에게 값을 줄 수 없음
  3. Immutable Date, 변하지 않는 데이터이다.(그러므로 자식 컴포넌트는 props를 받아오기만 할 수 있고 직접수정 할 수 없다.)

props 사용법

<컴포넌트 이름 props이름 = >

부모컴포넌트에 HTML 속성 정의하듯이 자식컴포넌트의 속성처럼 사용하면 된다.
props를 정의하면 하위 컴포넌트에서 {this.props.propsName}으로 사용할 수 있다.
(함수형 컴포넌트라면 {props파라미터.propsName}으로 사용한다.)
예시

0개의 댓글