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

 

 

이번 글을 통해 배워갈 내용

1. function components

 

 

---

 

지금까지는 클래스 컴포넌트를 사용해서 예제를 작성했습니다.

 

클래스에서는 React.Compoent를 상속 받아서 render method로 출력을 했습니다만

 

일부 컴포넌트는 Class 없이 함수로 간단하게 표현 할 수 있습니다.

 

이를 통해 더 간결하고 명확한 코드를 작성 할 수 있습니다.

 

상황에 맞게 둘중에 적합한 방법을 쓰는게 좋을 것 같습니다.

 

제가 참조하는 리액트 공식 문서 튜토리얼에서는 Square 클래스를 함수로 변경하기에 

 

저도 한번 보고 따라서 변경해보겠습니다. 

 

---

// import React from "react";

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

// after
export default function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

 

위에 보시는 것처럼 내부에 this 그리고 render 함수 없이 코드가 함수로 더 간결하게 작성된것을 알수 있습니다.

 

기능상에는 차이가 없기 때문에 다음강의로 넘어가겠습니다.

 

조금더 공부해보고 싶으신 분들은 아래 

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

onClick={props.onClick}

코드를 보시고 어떤 차이가 있는지 생각해 보시면 좋습니다.

 

 

 

---

읽어주셔서

감사합니다.

 

다음 강의에서는

 

"O"를 넣는 기능과 순서대로 플레이 하는 기능을 추가하겠습니다.

---

 

코드보기

 

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)

 

---