TICTACTOE 만들기 4 (클래스형 -> 함수형 변경)

 

※ 리액트 Hooks를 이용해서 TicTacToe 앱을 함수형 컴포넌트로 바꾸기

 

- 클래스 컴포넌트에서 함수 컴포넌트로 바꾸는 순서

 

1. 컴포넌트 자체를 바꾸기

 

 

2. State를 useState Hook을 이용해서 표현하기

 

여기서 위의 코드는  변수와 State를 정하는 함수를 나타낸다. (value는 getter, setValue는 setter)

 

 

 

3. this.state.squares는 squares로 변경

    ( 예시. this.state.todoData -> todoData   /  this.state.value -> value )

state를 새로운 값으로 update 해줄 때는 this.setState({value:""})  ==> setValue("") 이렇게 해준다.

handleClick 안의 Squares와 위의 const의 getter의 Squares와 이름이 같으면 안되므로 이름변경도 해준다.

 

 

 

 

4. 정의된 함수 및 메소드 사용 방법 변경

: const를 붙여주고 화살표(=>) 도 붙여준다. 그리고 위와 동일하게 this.state를 없애주고 this도 없애준다.

 

여기서도 this.를 모두 없애준다.

 

 

마지막으로 이 Board를 다른 컴포넌트에서 호출해서 사용할 수 있도록 해주기 위해 export default로 걸어준다.

(비주얼 스튜디오에서 rafce 하면 자동으로 import와 export가 생성된다.)

 

 

 

Component는 클래스로 extends 안해줄 것이기 때문에 삭제해주면 된다.

 

 

 

 

5. Square 컴포넌트도 변경

 

방법1. (props를 전달해주기)

 

 

방법2. (destructuring - 구조분해할당)

현재는 전달해주는 값이 없기때문에 onClick()에서 괄호 빼줘도 됨

 

 

 

Square도 export 해준다.

 

 

 

 

그럼 클래스 컴포넌트로 된 코드들을 함수형 컴포넌트로 모두 바꾸게 되었다.

 

 

 

 

< 전체 코드 > 

- Board.js 변경 전 -> 변경 후

 

 

- Square.js 변경 전 -> 변경 후