React의 4가지 개념(3) - props

React의 세 번째 개념, Props에 대해 알아봅시다.

props

React Component를 호출할 때, 상황에 따라 부모 Component에서 어떠한 값을 넘겨줘야 할 때도 있습니다. 이럴 때 사용하는 것이 Props입니다. Props는 properties의 줄임말로, HTML에서 사용했던 attribute와 생김새가 비슷합니다. 한 번 직접 만들어보며 확인해봅시다. App.js 코드를 아래와 같이 바꿔봅시다.

(...)
function FCHello(props) {
  return (
    <>
      <h1>Hello {props.name}!</h1>
    </>
  );
}

class CCHello extends React.Component {
  render() {
    return (
      <>
        <h1>Hello {this.props.name}!</h1>
      </>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <>
        <FCHello name="Function Component" />
        <CCHello name="Class Component" />
      </>
    );
  }
}
(...)

(생략된 부분은 기존 코드와 동일합니다.)

App Component의 코드는 FCHello Component와 CCHello Component에 name이라는 props를 “~ Component”라는 값으로 준 것입니다. HTML의 attribute 설정과 비슷한 형태로 사용하시면 됩니다.

반면, Component에서 props를 받는 방법은 Function Component와 Class Component가 다릅니다. Function Component에서는 함수의 인자로 props를 받고, Class Component의 경우 class 내부의 property로 받게 됩니다.

Function Component에서는 props를 함수의 인자로 받고, 각각의 props는 props.~~의 형태로 사용하면 됩니다. 위 예시의 경우, name이라는 이름의 props를 넘겼기 때문에 해당 값을 사용하려면 props.name을 사용하면 됩니다.

Class Component에서는 props를 해당 class의 property로 받습니다. 따라서 해당 값을 접근 하려면 this.props.~~의 형태로 접근해야 합니다. JavaScript class / ES6 syntax에 대한 내용은 이 수업의 범주를 넘어가므로, 검색 혹은 이 링크를 통해 추가적인 정보를 확인해보시면 되겠습니다.

Destructuring

React는 Babel을 통하여 ES6 문법을 기본적으로 지원합니다. ES6란 ECAMScript6의 줄임말로, 2015년 발표된 JavaScript 버전입니다. ES6에서는 JavaScript에서 거대하다고 할 수 있는 변화들이 몇가지 있었는데, 그 중 하나는 우리가 지금 사용하고 있는 class 문법이고, 하나는 지금 배우게 될 destructuring 입니다.

Destructuring은 해석하면 “비구조화"라는 뜻으로, 구조화되어 있는 형태(배열, 객체 등)을 하나 하나의 변수로 뽑아낸다고 생각하시면 됩니다. 우리가 React를 사용하면서 가장 많이 사용할 destructuring은 object destructuring입니다. 객체 안에 들어있는 내용을 하나하나 뽑는 방식인데, 코드를 보면서 설명하겠습니다.

const personalInfo = {
  name: 'Tarrazu',
  age: 24,
};

const name = personalInfo.name;
const age = personalInfo.age;

console.log(name, age);

위와 같은 코드가 있다고 가정해 봅시다. personalInfo라는 객체 안에 들어있는 모든 key에 대하여 변수를 만들고 싶다고 할 때, 아래 5, 6줄처럼 작성하면 personalInfo.* 대신 각자의 key를 사용하는 것만으로 변수에 접근할 수 있습니다. 그런데 personalInfo 객체가 2개의 key가 아니라 그것보다 훨씬 많은 key를 가지고 있다면 모든 key값에 대해 변수를 만드는 것이 어렵겠죠? 그래서 사용하는 방법이 destructuring입니다. 위 코드의 맨 아래 두 줄은 아래와 같이 짧게 작성할 수 있습니다.

const { name, age } = personalInfo;

console.log(name, age);

위와 같은 예시로, 우리가 만든 FCHello Component나 CCHello Component의 경우 아래와 같이 작성할 수 있습니다.

function FCHello(props) {
  const { name } = props;

  return (
    <>
      <h1>Hello {name}!</h1>
    </>
  );
}

class CCHello extends React.Component {
  render() {
    const { name } = this.props;
    return (
      <>
        <h1>Hello {name}!</h1>
      </>
    );
  }
}

그리고 FCHello의 경우 아래처럼 더 줄일 수도 있습니다.

function FCHello({ name }) {
  return (
    <>
      <h1>Hello {name}!</h1>
    </>
  );
}

같은 맥락으로, 우리가 사용하는 React.Component도 import할 때 destructuring이 가능합니다. import와 destructuring을 동시에 사용하려면 다음과 같이 하시면 됩니다.

import React, { Component } from "react";
(...)

class CCHello extends Component {
  (...)
}

class App extends Component {
  (...)
}
  
(...)

앞으로 이 강의에서는 코드의 간결성을 위해 destructuring이 가능한 경우 destructuring을 사용하겠습니다.