[Fast Campus , React] 6. TicTacToe 앱 만들기 (2) - props, state

Pros를 통해 컴포넌트 간에 데이터를 전달하기

1. Props : Properties의 줄임말
2. Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법
3. 읽기 전용 (immutable)으로 자녀 컴포넌트 입장에선 변하지 않는다 (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 한다

1. 상위 컴포넌트가 임의이 이름으로 (여기선 value) props 설정하고 하위 컴포넌트에 값 설정

export default class Board extends Component {

    renderSquare(i) {

        return <Square value={i} />

    }

    render() {

        const status = "Next Player: X";

        return (

            <div>

                <div className="status">{status}</div>

                <div className="board-row">

                    {this.renderSquare(0)}

                    {this.renderSquare(1)}

                    {this.renderSquare(2)}

....

2. 하위 컴포넌트는 props.상위 컴포넌트의 props이름으로 값을 가져온다. (여기선 value)

export default class Square extends Component {

    render(){

        return (

            <button className="square">

            {this.props.value}

            </button>

value=1 -> this.props.value 로 값을 가져온다

 

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

Square컴포넌트 클릭하면 console창에 내용찍기.

<button className="square"

                onClick={()=> console.log("Clicked")}>

onClick 이벤트 추가.

 

State 추가

어떤 정보를 기억하기 위해서 Component는 state를 사용

 

* 클릭하면 setState를 이용해서 'X'를 표시하는 부분

export default class Square extends Component {

    constructor(props) {

        super(props);

        this.state = {

            value: null,

        }

    }

    render() {

        return (

            <button className="square" onClick={()=> {this.setState({value:'X'})}}>

                {this.state.value}

            </button>

setState를 이용해서 click할때, X 표시

Constuctor(생성자)

인스턴스화된 객체에서 처음에 수행해야 하는 사용자 초기화가 가능

React 컴포넌트는 생성자에 this.state를 설정하는 것으로 state를 가질 수 있다.

클래스에 new를 붙여서 { new User("Name")) 인스턴스화되면 constructor가 먼저 실행

 

 

React State?

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체.

State가 변경되면 컴포넌트는 re-rendering 된다. 또한 state는 컴포넌트 안에서 관리된다.