Props

props의 특징

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

How to use props

props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링한다.

위 단계에 props를 사용하기 위해 우선 <Parent>와 <Child>라는 컴포넌트를 선언하고, <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성합니다.

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

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

컴포넌트를 만들었으니, 이제 전달하고자 하는 속성을 정의해 봅시다. HTML에서 속성과 값을 할당하는 방법과 같습니다.

<a href="www.codestates.com">Click me to visit Code States</a>

React에서 속성 및 값을 할당하는 방법도 이와 유사합니다. 다만, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸주면 됩니다.

<Child attribute={value} />

위 방법을 이용하여 text라는 속성을 선언하고, 이 속성에 "I'm the eldest child"라는 문자열 값을 할당하여 <Child> 컴포넌트에 전달해 봅시다.

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

자, 이제 <Parent> 컴포넌트에서 전달한 "I'm the eldest child"라는 문자열을 <Child> 컴포넌트에서 받아 봅시다. 방법은 간단합니다. 함수에 인자를 전달하듯이 React 컴포넌트에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 오게 됩니다.

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

props를 전달 받았으니, 마지막으로 이 props를 렌더링해봅시다. props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 됩니다. 다만, props는 객체라고 하였고, 이 객체의 { key : value } 는 <Parent> 컴포넌트에서 정의한 { attribute : value } 의 형태를 띠게 됩니다. 따라서 JavaScript에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value또한 dot notation으로 접근할 수 있습니다. 아래와 같이 props.text를 JSX에 중괄호와 함께 작성하면 잘 작동합니다.

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

props.children

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

 

출처: 코드스테이츠