[리액트 틱택토 게임] 함수형 컴포넌트를 클래스형으로 바꾸기

클래스형 컴포넌트

import React from 'react';

class Square extends React.Component {

  render() {

    return (

      <button className="square" onClick={this.props.onClick}>

        {this.props.nums}

      </button>

    );

  }

}

export default Square;

 

 

 

함수형 컴포넌트

import React from 'react';

  function Square(props) {

    return (

      <button className='square' onClick={props.onClick}>

        {props.nums}

      </button>

    );

  }

 

  export default Square;

 

 

Props 를 사용한 기본적인 함수형 컴포넌트 

import React from 'react';

const Square = (props) => {

  return (

    <button className="square" onClick={props.onClick}>

      {props.nums}

    </button>

  );

};

export default Square;

 

 

컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있습니다.

props 는 객체 형태로 전달되며, 만약 nums값을 조회하고 싶다면 props.nums 을 조회하면 됩니다.

 

이 경우 props 내부의 값을 조회 할 때마다 props. 를 입력해야하는데, 함수의 파라미터에서 비구조화 할당 문법을 사용하여 간결하게 작성할 수 있다.

 

 

비구조화 할당하기

import React from 'react';

const Square = ({ nums, onClick }) => {

  return (

    <button className="square" onClick={onClick}>

      {nums}

    </button>

  );

};

export default Square;

 

• 컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.