[React] State - 함수형 컴포넌트의 state와 주의점

지난번에 클래스형 컴포넌트의 state를 다뤘습니다. 이번엔 함수형 컴포넌트의 state를 다룰 차례입니다. 함수형 컴포넌트에서는 바로 state에 접근할 수 없고 useState 함수를 통해서 state에 접근할 수 있습니다.

---

1. useState

useState 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 기능입니다. useState는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요.

이것을 배우기 위해 '배열 비구조화 할당'이란것을 사용하겠는데, 이것에 대한 설명은 아래를 참조해주세요.

https://bamtory29.tistory.com/entry/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9?category=924733 

[Javascript] 구조 분해 할당

 

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 함수입니다.

그 아래 코드로는 setMsg를 통해 현재 상태를 변경하는 함수를 정의했고 결과를 return하는 구조로 코드가 짜여져 있습니다.

실행 결과로 입장과 퇴장 버튼을 누를 때 마다 msg 문구가 생기고 변경됩니다. 즉, state가 변경된 것 이죠.

 

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

 

 

2. 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;

---

참조

https://react.vlpt.us/basic/07-useState.html

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

https://ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React