TicTacToe 앱 만들기 2 (Props, 사용자와 상호작용)

 

● Props (Properties)

Props는 상속하는 부모  컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법

Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 한다.)

 

 

A 부모 컴포넌트

state = { a : "a" }

 

< B 컴포넌트 aProps(프롭스 이름) = { this.state.a } />     

B 자식 컴포넌트 

a state 필요

this.props.aProps

         

ex) 부모인 Board 컴포넌트에서 < Square aprops={1} /> 이렇게 보내주고 자식인 Square 컴포넌트에서 {aprops} 1 이렇게 받아오면 됨

 

 

 

 

 

< 실습하기 >

Board 컴포넌트에서 0 ~ 8 까지의 숫자를 Square에 넘겨줘야 한다.

 

Board.js에서 value라는 props 명을 사용하여 숫자를 보내주고 

 

 

 

Square.js에서 this.props.value 를 사용해서 Board.js에서 보낸 props를 받아 출력시킨다.

여기서 value는 board.js에서 지정한 props명이다.

 

 

 

 

리액트를 실행시키면 square 안에 board에서 건네 받은 숫자들이 출력되는 것을 확인 할 수 있다.

 

 

 

 

 

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

이번에는 Square 컴포넌트를 클릭하면 로그를 찍어주는 코드를 작성해본다.

 

 

Square.js에 onClick 함수를 사용하여 작성했다.

 

모두 작성하고 실행시키면 Square를 클릭했을 때 console 창에 click 횟수가 찍히게 된다.