REACT - Props를 통해 데이터 전달하기

리액트 자습서

React?

React는 사용자 인터페이스(UI)를 구축하기 위한 선언적, 효율적, 유연한 JavaScript 라이브러리이다. 컴포넌트를 기반으로 UI를 구성하며, 필요한 부분만 업데이트하는 방식으로 동작한다.

React에는 여러 종류의 컴포넌트가 있지만, 일반적으로 React.Component를 상속받아 사용하며 컴포넌트는 UI를 독립적인 블록으로 구성하는 단위이다.

render() 함수는 화면에 표시할 내용을 반환하는 함수 / 반환 값은 React 엘리먼트(가벼운 객체) 형태이며, 이를 통해 DOM을 업데이트

JSX -> React에서 UI를 쉽게 작성할 수 있도록 도와주는 특수한 문법, HTML과 유사한 구조이지만 JavaScript 문법이 포함된 형태, JSX를 사용하면 UI 구조를 보다 직관적으로 작성 가능

 

React에서 부모 컴포넌트(Board)에서 자식 컴포넌트(Square)로 props를 전달하는 방법

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Game />, document.getElementById("root"));

사용자와 상호작용하는 컴포넌트 만들기

console.clear();

import React from "https://cdn.skypack.dev/react@17";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17";

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({ value: "X" })}
      >
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Game />, document.getElementById("root"));