Props

서재홍·2022년 8월 3일
0

학습 목표

  • state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
  • React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
  • React 컴포넌트(React Component)에 props를 전달할 수 있다.
  • 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
  • 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
  • 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
  • React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.

props의 특징

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

    읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.


How to use props

props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.
1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

전달하고자 하는 값을 중괄호{}를 이용해서 감싸준다.

<Child attribute={value} />

React에서 JSX 속성 및 값을 할당하는 방법 1

위 방법을 이용하여 text라는 속성을 선언하고 문자열 값을 할당

<Child text={"I'm the eldest child"} />

React에서 JSX 속성 및 값을 할당하는 방법 2

문자열을 <Child> 컴포넌트에서 받기

function Child(props) {
  return (
    <div className="child"></div>
  );
};

<Child> 컴포넌트에서 props 매개변수 사용 예시

JSX 안에 직접 불러서 props를 렌더링

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

<Child> 컴포넌트에서 props.text렌더링 예시


props.children

props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있습니다.
이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있습니다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

0개의 댓글