state

클래스형 컴포넌트에서도 state가 뭔지 설명했지만 다시 한 번 이야기하고 넘어가겠습니다.

state는 컴포넌트 내부에서 바뀔 수 있는 값 입니다. props와의 차이점은 props는 컴포넌트에서 사용되기 위해 부모 컴포넌트가 설정해주는 값이기에 값을 바꾸기 위해서는 부모 컴포넌트에서만 접근했어야 합니다. 그래서 props는 마치 함수의 인자 처럼 외부에서 컴포넌트로 전달 되었습니다. 반면 state는 현재 컴포넌트에서 값이 바뀔 수 있다는 차이점이 있습니다. 그래서 state는 마치 함수(클래스) 내부에서 선언되어 사용되는 로컬 변수처럼 컴포넌트 내부에서 자유롭게 이용할 수 있습니다.

또, 이전에 함수형과 클래스형 컴포넌트를 소개하면서 state 사용에 차이가 있다는 것을 기억하시나요? 클래스형 컴포넌트는 자유롭게 state에 접근할 수 있지만, 함수형 컴포넌트는 state를 직접 사용하진 못하고 다른 메소드를 통해서 사용해야 했습니다.

이번에는 함수형 컴포넌트에서 state는 어떻게 접근하고 사용할 수 있는지 알아보도록 하겠습니다.

useState

useState() 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 함수입니다. useState()는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요. 지금은 함수형 컴포넌트에서 state를 다루는 방법을 알아보기 위해 useState Hook을 간단하게 소개만 하고, 나중에 정식으로 제대로 소개시켜드리겠습니다.

useState를 사용할 때 배열 비구조화 할당이라는 것을 사용합니다. 비구조화 할당은 이 포스트를 참조해주세요.

useState를 사용한 프로그램 예제입니다. 이 프로그램은 사용자가 버튼을 누르면 그 버튼에 맞는 문구를 출력해주는 프로그램입니다.

import React, {useState} from 'react';

const StatePracFunc = () => {
    const [msg, setMsg] = useState('');
    const onClickerEnter = () => setMsg('안녕하세요.');
    const onClickerLeave = () => setMsg('안녕히 가세요.');

    return (
        <div>
            <h1>{msg}</h1>
            <button onClick={onClickerEnter}>입장</button>
            <button onClick={onClickerLeave}>퇴장</button>
        </div>
    );
};

export default StatePracFunc;

---

const [msg, setMsg] = useState('');

useState()를 비구조화 할당 할 때 인자로 초깃값을 설정했습니다. 클래스형 컴포넌트에서는 state 초기값을 줄 때 무조건 객체로 넘겨야 했지만, useState를 통한 초깃값은 배열, 객체, 문자열, 숫자 등 자유롭게 설정할 수 있습니다.

이 배열 비구조화 할당은 msg와 setMsg로 설정했습니다. msg는 현재 상태를 저장한 state 명이고, setMsg는 state 상태를 변경하는 setter 함수입니다. 앞으로도 useState를 이용한 비구조화 할당에서 [state, setState]와 같은 형태를 이용할 것입니다.

비구조화 할당 이후 setMsg를 통해 현재 상태를 변경하는 함수를 정의했고 결과를 return하는 구조로 코드가 짜여져 있습니다.

---

위 코드를 실행해보면 다음과 같이 버튼이 두 개 나타날 것 입니다.

버튼을 누르면 입장, 퇴장에 맞는 문구가 제대로 출력이 되나요? 실행 결과로 입장과 퇴장 버튼을 누를 때 마다 msg 문구가 생기고 변경됩니다. 이 변화가 바로 state인 msg가 변화한 것 입니다.

지금 예제에서는 useState 함수를 한 번만 사용했지만, 한 컴포넌트 내부에서도 useState를 여러 번 사용할 수 있습니다.

state 사용의 주의점

state는 다음과 같이 만들고 사용할 수 있습니다.

//클래스형 컴포넌트
this.state

//함수형 컴포넌트
const [state, setState] = useState({num: 0});

값을 변경할 때 state에 직접 접근해서 값을 변경하는 것이 아닌, 반드시 setter를 이용해서 값을 바꿔주어야합니다. 다음과 같이 직접 접근해서 변경하는 것은 불가능 합니다.

//클래스형 컴포넌트
this.state.stateValue = 100;

//함수형 컴포넌트
const [state, setState] = useState({num: 0});
state.num = 100;