컴포넌트 활용하기(state)

state

 state 는 리액트 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 props는 이전 포스팅에서 자세히 다루어 봤는데, 이는 사용되는 과정에서 부모 컴포넌트에서 설정하는 값이  지정이 되며 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. 즉 props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 합니다. 하지만 state는 컴포넌트 내부에서 직접 값을 변경하는 것이 가능합니다. state의 종류로는 클래스형 컴포넌트의 state와 함수형 컴포넌트의 useState() 라는 함수가 있습니다 예제를 통해 이 두 가지에 대해 알아보겠습니다.

클래스형 컴포넌트의 state

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { // state초기값 서정
            number : 0
        };
    }
    render() {
        const{number} = this.state; //state 값 조회는 this.state로 
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={()=>this.setState({number: number+1})}> {/* this.setState를 통해 새로운 값 삽입*/}
                  +1
                </button>
            </div>
        );
    }
}

export default Counter;

 먼저 이런식으로 코드를 작성해 보겠습니다  해당 코드의 대한 설명은 코드블럭 내 주석으로 처리 되어 있습니다. 이것에서 좀더 중점적으로 알아야 할 내용을 살펴보면 먼저 constructor 가 있습니다 이는 컴포넌트 생성자 메서드로 이 함수는 상속받고 있는 리액트 컴포넌트에서 자동으로 호출 됩니다. 또 유의사항이 하나 있다면 생성자 함수에는 반드시 super(props)가 호출 되어야 합니다.

 물론 constructor를 반드시 사용해야하는 것은 아닙니다 일반적으로 state 값을 생성자 밖에서 사용하는 경우가 많은데 이럴 경우 아래와 같이 코드를 작성 할 수 있습니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
    state = {
        number : 0
    }
    render() {
        const{number} = this.state; //state 값 조회는 this.state로 
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={()=>this.setState({number: number+1})}> 
                  +1
                </button>
            </div>
        );
    }
}

export default Counter;

 개발을 하다보면 위와 같은 setState 이후 특정 작업을 수행하고 싶을 경우가 있습니다. 이럴 경우 callback 함수를 등록하여 로직을 처리할 수 있습니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Counter extends Component {
    state = {
        number : 0
    }
    render() {
        const{number} = this.state; //state 값 조회는 this.state로 
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={()=> {
                    this.setState(
                        {
                            number : number +1 
                        }, 
                        () => {
                            console.log("setState callback!")
                            console.log(this.state);
                        }
                    )
                }}>
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

 위와 같이 setState의 두번째 인자의 함수를 지정했습니다.  해당 로직은 button이 클릭 되었을 경우 setState Callback! 이라는 텍스트와 +1되어진 number state 값을 console에 출력하게 됩니다

함수 컴포넌트에서의 state

 함수 컴포넌트에서의 단점 중의 하나가 state를 사용할 수 없다는 것이였습니다 그렇지만 현 리액트 버전에서느 useState라는 함숙를 사용하여 함수 컴포넌트에서도 state를 사용할수 있게 되었습니다. 이 과정에서 Hooks라는 것을 사용하게 되는데 일단 이 내용에서는 Hooks의 자세한 내용 보다는 useState를 중점적으로 다뤄보곘습니다.

import React, {useState} from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage("hello React");
    const onclickLeave =() => setMessage("Good bye React");

    return (
        <div>
            <button onClick={onClickEnter}>Hello</button>
            <button onClick={onclickLeave}>Good Bye</button>
            <h1>{message}</h1>
        </div>
    );
};

export default Say;

먼저 위 코드의 상수 선언 3줄이 useState를 사용하는 구간입니다 useState의 인자값은 먼저 상태의 초기값을 setting 니다 그리고 배열의 첫 번째 원소는 현재 상태가 되고 두 번째 원손느 상태를 바꾸어 주는 함수입니다 일반적인 다른 프렝미워크들의 setter와 동일한 기능을 제공해준다고 보면 됩니다.