[리액트 틱택토 게임]this.props.children 이해하기, props 이해하기

말의 개수 제한하기를 하기 전에,

props와 this.props.children에 대해 살펴본다.

리액트 컴포넌트는 props로 children이라는 것을 받는다.

 

Props란?

props 는 properties 의 줄임말 (어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용)

• 여러개의 props는 비구조화 할당으로 간결하게 작성
• defaultProps 로 기본값 설정가능
• props.children
• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children

 

컴포넌트 구조를 보자.

 

 

Game이라는 최상단의 부모가 있고,

그 아래에 Board

그리고 그 자식으로 Square가 있는 것을 알 수 있다. 

 

Board.js

import React from 'react';

import Square from './Square';

class Board extends React.Component {

 

    renderSquare(i) {

      return (

        <Square

          key={i}

          nums={this.props.squares[i]}

          onClick={() => this.props.onClick(i)}/>

      );

    }

   

   

    render() {

      const size = this.props.size;

      let board = []

      for (let row = 0; row < size; row++) {

        let boardRow = [];

        for (let col = 0; col < size; col++) {

          boardRow.push(this.renderSquare(row * size + col));

        }

        board.push(

          <div key={row} className="board-row">

            {boardRow}

          </div>

        );

      }

      return (

        <>

          <div>

            <h1>{size}</h1>

            <div>

              {board}

            </div>

          </div>

        </>

       

      );

    }

  }

 

  export default Board;

 

Board.js를 보면, 내부에 Square 컴포넌트를 갖는 것을 확인할 수 있는데 태깅박스 안에 있는 것들을 확인할 수 있다. 

• Board라는 부모 컴포넌트가 있습니다.
• 그 안에는 Square이라는 자식 컴포넌트가 들어가있습니다.
• 그 자식 컴포넌트 태그 안에는 key, nums, onClick이 있습니다.
• 그렇다면 Square은 어떤 역할을 하는 것일까?

Square.js

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;

• 일단 간단히만 설명하자면, 앞으로 <Square/> 로 감싸진 부분은 위 코드 예제의 this.props.children 자리에 들어오게 된다는 뜻입니다.

쓰이는 곳(Game.js)에서 값을 정한다 = props(부모)
쓰임 당하는 곳(Board.js나 Square.js)에서 값을 정한다 = children

 

 

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 됩니다.

컴포넌트 태그 사이에 값이 있을때 'children'이란 예약어를 사용하면 된다.

 

 

번외.

 

Square.js 함수형 컴포넌트를 클래스형으로 바꾸기. 

Square.js 클래스형 컴포넌트를  함수형으로 바꾸기. 

 

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