(1-7) React 기초 - props

 

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를 렌더링한다.

 

위 단계에 맞추어 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>
  );
};

[코드] <Parent>, <Child> 컴포넌트 선언

 

 

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

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

[코드] HTML 속성과 값 다루는 법

 

 

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

<Child attribute={value} />

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

 

 

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

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

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

 

 

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

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

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

 

 

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>
  );
};

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

 

 

여기까지가 props 를 사용하는 방법의 전부이고, 위 코드를 실행해 보면 다음과 같다.

 

 

 

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>
  );
};