리액트 state & props

state는 말 그대로 상태. 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 말한다.
state는 화면에 보여줄 컴포넌트의 정보(상태)를 가지고 있는 객체이다!
state는 컴포넌트 안에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.

Class형 컴포넌트에서 state가 어떻게 쓰이는지 알아보자~

import React from 'react';

class State extends React.Component {
	constructor() {
    	super();
        this.state = {
        	color: 'red';
        };
    }
}
	render() {
    	return (
        	<div>
            	<h1>Class Component | State</h1>
            </div>
        );
    }
}

export default State;

클래스형 컴포넌트 안에는 반드시 render 함수가 필요하고 화면에 나타내고 싶은 JSX 요소는 return 문 안에 집어넣는다!
간단하게 말해서 html은 return 문 안에 넣고 javascript 로직 작동하는 부분은 그 위에 써준다고 생각하면 편하다.
먼저 초기값은 constructor 함수를 이용해 설정해준다.
여기서 this는 해당 컴포넌트 그 자체를 가리키고 초기값은 color를 red로 초기값을 설정해주었다!
constructor 함수 안에는 super()를 호출해야 한다 (super가 정확히 무슨 역할을 하는지는 모르겠음...)

state는 위에서 말했듯이 객체이다 따라서 key value 형태로 상태값을 설정해준다.
그래서 this.state = { color: 'red' } 라는 모양이 나온것이다!

state 에서 이렇게 상태값을 설정하는 이유가 뭘까??
그 이유는 컴포넌트 안의 요소에서 그 상태값을 이용하여 데이터가 바뀔때마다 효율적으로 동적으로 화면에 나타내기 위함이다!

리액트는 SPA 싱글페이지 어플리케이션이다.
html이 여러개가 아니기 때문에 state가 바뀔때마다 새로 화면을 렌더를 시켜서 마치 우리가 화면을 이동한것 처럼 보여주는 것이다!

다음 코드를 봐보자

import React from 'react';

class State extends React.Component {
	constructor() {
    	super();
        this.state = {
        	color: 'red';
        };
    }
}
	render() {
    	return (
        	<div>
            	<h1 style={{ color: this.state.color }}>Class Component | State</h1>
            </div>
        );
    }
}

export default State;

위에 constructor로 초기값을 설정해주었으면 이제 이걸 해당 요소에 직접 적용시켜 보는 것이다.
style={{ color: this.state.color }} 객체니깐 dot nation으로 state의 key에 접근하여 value(red)를 color 속성에 넘겨주었다.

요약해보자면 constructor 함수를 이용해 state 객체의 초기값을 설정한 후에 return 문 안에 state를 적용시키고 싶은 요소에 속성값으로 dot nation 형태로 넘겨줌을 알수 있었다!

단순히 정적으로 색깔만 바꾸는것은 재미가 없다
화면을 동적으로 변화시키고 싶다면 함수를 이용해 이벤트를 걸어야겠지?
아래 코드를 한번 보자~

import React, { Component } from 'react';

export class State extends Component {
	constructor() {
    	super();
        this.state = {
        	color: 'red'
        };
    }
    
    handleColor = () => {
    	this.setState({
        	color: 'blue'
        })
    }

	render() {
    	
        return (
        	<div>
            	<h1 style={{color: this.state.color}}>Class Component | State</h1>
                <button onClick={this.handleColor}></button>
            </div>
        )
    }

차근차근 살펴보자 !
handleColor 콜백함수를 넣어서 state값을 red에서 blue로 수정해주었다.
이때 state의 값은 setState함수를 통해서 바꿀수 있다! 그냥 직접 this.state.color = blue; 이런식으로 바꾸면 리액트가 이를 알아차리지 못한다!
그 다음 버튼태그를 만들어서 클릭하면 작동하는 onClick 이벤트를 걸어주었다.
값으로는 this.handleColor를 넘겨주었는데 이를 해석하면 해당 컴포넌트(this) 에서 로직이 작동하는 handleColor 함수를 넘겨준 것이다. 여기서 또 dot nation이 쓰이는데 이는 컴포넌트도 객체임을 암시한다!

이번에는 Props에 대해서 알아보자
props는 properties의 줄임말이라고 생각하면 된다.
즉, 컴포넌트의 속성값이다.
props도 state처럼 객체인데 부모 컴포넌트로부터 전달 받은 데이터를 지니고있는 객체이다.
props를 통해서 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수가 있다.

코드를 통해서 더 자세히 알아보자

// 현재 위치 Parent.js

import React from 'react';
import Child from '../pages/Child/Child';

class Parent extends React.Component {
	constructor() {
    	super();
        this.state = {
        	color: 'red'
        };
    }
}
	render() {
    	return (
        	<div>
            	<h1>Parent Component</h1>
                <Child />
            </div>
        )
    }
}

export defautl State;

여기서 Parent.js 는 부모 컴포넌트 이다.
부모 컴포넌트에서 자식 컴포넌트 Child를 import 한 후 h1 아래에 입력해주었다.

이제 부모 state의 데이터 값을 자식 컴포넌트 Child에 넘겨줘보자!
코드가 반복되니 Child 부분만 따로 떼서보면

<Child titleColor={this.state.color} />

자식 컴포넌트에 props로 titleColor 속성을 생성하고 titleColor의 값으로 this.state.color (여기서 this는 부모 컴포넌트를 의미!) 즉, 부모 컴포넌트의 state객체의 color의 값을 전달해주었다!

이런 방식으로 props를 통해 부모 컴포넌트의 state를 자식 컴포넌트에게 전달할 수 있다 (Q 반대로는 어떻게...?)

그럼 이제 Child 컴포넌트로 이동해서 전달받은 props 데이터 값을 어떻게 사용하는지 알아보도록 하자!

// 현재 위치 Child.js

import React from 'react';

class Child extends React.Component {
	render() {
    	// console.log(this.props); // props 값을 한번 찍어보자
    	render(
        	<div>
            	<h1 style={{color: this.props.titleColor}}>Child Component</h1>
            </div>
        );
    }
}

export default Child;

이 부분을 보면

<h1 style={{color: this.props.titleColor}}>Child 

앞에서 state를 공부할 때 이렇게 자식 부모간 컴포넌트를 이동하지 않고 값만 전달해주었을 때는 this.state.titleColor 이런식으로 전달해주었는데 부모에서 자식으로 props로 값을 전달해주어서 this.props.titleColor의 형태로 바뀐것을 볼 수 있다.

(확인)
여기서 this는 주의할것이 부모에서 자식으로 값을 넘겨준다고 해서 부모 컴포넌트를 가리키는 것이 아니고 현재 자신의 컴포넌트 Child를 의미한다!