리액트로 틱택토 게임 만들면서 기초 배우기 # 6 (controlled components)

---

 

 

이번 글을 통해 배워갈 내용

1. controlled components

 

 

---

 

여러개의 자식 컴포넌트에서 부모가 데이터를 얻을 때

혹은 두개의 자식 컴포넌트 간에 데이터를 주고 받을 때

공유하는 State(상태)를 부모 컴포넌트에서 선언해줘서 관리를 해줍니다.

 

 

부모  컴포넌트는 자식들에게 데이터를 props를 통해 전달하고

이는 부모와 자식 그리고 자식과 자식 간에 데이터를 동기화 해줍니다.

 

 

---

 

 

  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

 

먼저 보드 클래스에 생성자를 추가해줍니다.

 

 

그뒤에

renderSqaure 함수를 변경해줍니다.

 

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;
  }

 

위에서 한 내용을 설명하자면

Board 클래스에 생성자를 만들어서

생성시에 state.sqaure 배열 안에 9개의 값을 null 로 채워 줍니다.

 

그리고 renderSquare 함수가 실행될때

인자로 i 값을 받아서

i번째 state.sqaure 배열 값을 전달해줍니다.

 

현재는 null 값이 배열안에 들어있고

이를 "O", "X", "null" 값으로 변경해주겠습니다.

 

---

 

Square 클래스로 돌아와서

import React from "react";

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

 

1. 생성자를 지워줍니다. 

2. setState() 함수를 this.props.onClick()으로 변경해줍니다.

3. state.value를 props.value로 변경해줍니다.

 

---

 

그뒤에 Board로 돌아와서

handleClick 함수를 추가해줍니다.

 

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = "X";
    this.setState({ squares: squares });
  }

그리고 renderSquare 함수에

handleClick 함수를 추가해줍니다.

 

        onClick={() => this.handleClick(i)}

 

이렇게 설정하면

Square Component는 Controlled Component 가 됩니다.

Board가 Square Component를 완전히 통제하기 때문입니다.

 

풀어서 설명하면

render 함수 내에서

각각의 네모에 맞는

renderSquare를 호출하고

 

props로 부모인 Board가 자식인 Square에게 value와 onClick 함수를 전달해줍니다.

 

handleClick 함수는 this.state.squares 라는 직접 바꾸는게 아니고 간접적으로 배열을 만들어서 다룹니다.

squares 객체를 만들어서 다루며 i번째 값을 "X"로 바꿔줍니다.

 

Square 클래스는 부모로 부터 props를 전달받아서

부모로 부터 받은 this.props.value 값을 표시합니다.

클릭시 부모로 부터 받은 onClick 함수를 실행합니다.

 

결과적으로 이전 강의와 동일하게 외관상 작동하나

내부는 부모가 자식을 Controlled Component로 다루면서 작동하는 점이 변경되었습니다.

 

 

---

읽어주셔서

감사합니다.

 

다음 강의에서는

 

Function Component에 대해서 알아보고

클래스 Component를 Function Component로 변경해보겠습니다.

 

---

 

코드보기

 

https://github.com/songk1992/react_tic_tac_toe_lecture

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

 

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---