state

이전 포스팅에서는 props객체를 통해서 자식 컴포넌트에게 값을 주는 것을 확인했다

state는 props와 비슷하게 컴포넌트가 가지고 있는 값이지만 부모에게서 넘겨 받는 것이 아닌

처음부터 컴포넌트 내부에 존재하고 있는 값을 state라고 한다

순수 함수처럼 작동해야하는 컴포넌트의 특성상 props는 외부에서 넘겨 받는 값이므로 내부에서 건드릴 수 없지만

state는 내부에서 수정이 가능하다

state와 lifecycle(생명주기 메소드)를 사용하기 위해선 컴포넌트를 클래스로 정의해주어야하는데

최근버전에서도 Hook을 이용해서 함수형 컴포넌트에서도 state와 생명주기 메소드를 관리할 수 있다고 하는데 이 포스팅은 리액트 공식 튜토리얼의 순서를 따라가고 있으니 일단은 이렇게..

let cnt = -1;

function Count(props){
    return (
        <div>
            <h2>{props.c}</h2>
        </div>
    )
}


function counting(number){
    return number +=1;
}

function Start(){
    cnt = counting(cnt);
    ReactDOM.render(
        <Count c={cnt}/>,
        document.getElementById('root'),
    );
}
setInterval(Start, 1000);

화면에 1초마다 1씩 늘어나는 숫자를 렌더링하는 코드이다

Count 컴포넌트에는 외부 개입이 너무 많다

cnt변수부터 counting변수 외부에서 반복 호출해주는 setInterval까지..

최종 목적은 Count컴포넌트에 내부에서 모두 처리할 수 있게 만드는 것이다

우선 이 코드를 클래스형으로 바꾸어보자

class Count extends React.Component{
    render() {
        return
            <div>
                <h2>{this.props.c}</h2>
            </div>
    }
}

클래스 컴포넌트로 바꾸려면 우선

1. 클래스로 선언하고
2. React.Component를 상속해주고
3. render() 메소드를 필히 정의해주어야한다

자세히 살펴보면 props객체에서 값을 불러오는 부분에 this가 추가된 것을 볼 수 있는데

클래스형 컴포넌트를 불러올 때 컴포넌트의 생성자에 props객체를 넘겨주기 때문에 불러오려면 앞에 this를 붙여야한다

일단 외부에서 props객체로 넘겨서 화면에 뿌리고 있는 cnt변수부터 내부로 넣어주자

class Count extends React.Component{
==========================
    constructor(props) {
        super(props);
        this.state = {
            cnt : 0
        }
    }
   ==========================
    counting() {
        this.setState({
            cnt: this.state.cnt + 1
        });
    }

    render() {
        this.counting();
        return (
            <div>
                <h2>{this.state.cnt}</h2><=======
            </div>
        )
    }
}

function Start(){
    ReactDOM.render(
        <Count />, <=======
        document.getElementById('root'),
    );
}
setInterval(Start, 1000);

바뀐 곳은 ====로 표시했다

클래스 컴포넌트는 항상 props로 생성자를 호출하고

super(props) 코드 이후에 this를 사용할 수 있다

this.state로 내부 변수를 선언하고, 불러오고

counting 함수를 내부 메소드로 변경, 호출

Count 컴포넌트에 넘겨주던 c={cnt}부분은 필요가 없어서 제거했다

다음 포스팅에 lifecycle에 대해 알아보겠다

---

state 값을 수정할 때는 this.state.cnt를 직접 수정하면 안된다

그렇게 수정하면 값의 변화를 감지하지 못해서 다시 렌더링을 하지않기 때문에

    this.setState({
        cnt: this.state.cnt + 1
    });

로 값을 수정해주어야한다