[React.js] 비구조화 할당으로 props 값 추출하기

1. 글을 쓰는 이유

필자는 클래스형 컴포넌트 방식보다 함수형 컴포넌트 방식을 자주 사용하는데, 여기서는 두 방식 다 다루려고 한다. 컴포넌트를 정의하고 props 값을 추출 할 때 props.value 이런 식으로 사용했다. props값이 많아질수록 사용하기 번거로워 다른 방법이 없나하여 찾아보게 되었다.

2. 기존 방식( in 함수형 컴포넌트 )

import React from 'react';

function MyComponent(props) {
  return(
    <div>
    	안녕하세요 제 이름은 {props.name} 입니다.
        나이는 {props.age} 살 이구요.
        잘 부탁드려요!
    </div>
  )
}

3. 비구조화 할당( in 함수형 컴포넌트 )

3-1. 첫 번째 방법

import React from 'react';

const MyComponent = (props) => {
  const {name, children} = props;
  return(
    <div>
    	안녕하세요 제 이름은 {name} 입니다.
        나이는 {age} 살 이구요.
        잘 부탁드려요!
    </div>
  )
}

3-2. 두 번째 방법

import React from 'react';

const MyComponent = ({ name, age }) => {
  return(
    <div>
    	안녕하세요 제 이름은 {name} 입니다.
        나이는 {age} 살 이구요.
        잘 부탁드려요!
    </div>
  )
}

4. 비구조화 할당( in 클래스 컴포넌트 )

import React, { Component } from 'react';

class MyComponent extends Component {
  /*
  constructor(props) {
    super(props);
    this.state = {
      greet: "잘 부탁드려요!!",
    }
  }
  */
  state = {
    greet : "잘 부탁드려요!!",
  }
  render() {
    const { name, age } = this.props;
    const { greet } = this.state;
    return (
      <div>
        안녕하세요 제 이름은 {name} 입니다.
        나이는 {age} 살 이구요.
        {greet} 
      </div>
    )
  }
}

함수형 컴포넌트 방식을 선호하는 필자는 3-2의 방법을 사용하는 것이 더 편할 것 같다.😁