동적인 값 관리 useState - React

React JS

React - 동적인 값 관리 useState

---

useState란?

리액트를 통해 인터랙티프한 페이지 작성을 위해서는 useState라는 리액트 Hooks 중 하나를 사용하는 것이 효율적입니다

import React, { useState } from 'react';

 

코드 에디터에 따라 다르지만 자동 입력되거나 직접 디스트럭팅하여 import 합니다.

 

useState 사용법

함수형으로 업데이트하는 방식은 아래와 같습니다. 이해를 돕기 위해 수 증감 기능을 작성했습니다.

 

import React, { useState } from 'react';

const PlusMinus = () => {
    const [num, setNum] = useState(0);

    const plus = () => {
        setNum(previous => previous + 1);
    }
    const minus = () => {
        setNum(previous => previous - 1);
    }

    return (
        <>
           <div>
              <button onClick={minus}>-</button>
	              <h1>{num}</h1>
              <button onClick={plus}>+</button>
           </div>
        </>
    )
}

 

위 코드를 직접 실행해보면 출력되는 값이 변하더라도 페이지를 새로고침하는 것이 아닌 num이라는 내용만 변화시키는 것을 확인할 수 있습니다. 리액트의 장점 중 하나이고 useState를 사용하는 이유입니다.

 

기능은 간단합니다. 단순히 버튼을 통해 num값을 컨트롤할 수 있습니다.

초기의 값으로 0을 선언하였습니다. -> useState(0)

값에 변화를 주고 그 값을 다시 num에 저장하기 위해서는 setNum() 함수에 변경하고자 하는 값을 지정하여 줍니다.

 

useState 사용 시 주의할 점

state값을 직접 핸들링하지 않도록 하여야 합니다.

 

수 증감 기능에서도 단순히 setNum(num + 1)이라고 plus 함수를 선언하여도 동작하지만 이 방법은 좋은 방법이 아닙니다.

공식문서에도 정리되어 있지만 직접적으로 state를 가져와 계산하게 되면 동시에 다수의 변화를 컨트롤하는 경우 틀린 값을 반환할 수 있습니다.

그렇기 때문에 previous라는 파라미터에 num 값을 가져오고 이 값을 컨트롤하는 방식이 안전합니다. 이는 함수형 업데이트 최적화와 관련되어 있습니다.

 

이 외에도 useState를 사용할 때 주의하여야 하는 내용은

 

state에 선언된 참조값을 수정할 때 불변성을 유지하고 새로운 참조값을 state로 사용하여야 합니다.

 

const App = () => {
const [state, setState] = useState({name: null});
return(
	<button onClick={() => setState(previous => {
            previous.name = "MXX";
            return previous;
        })}>
    	{state.name}	
    </button>

 

위와 같이 작성하여도 객체의 변화는 발생하지 않습니다.

 

const App = () => {
const [state, setState] = useState({name: null});
return(
	<button onClick={() => setState(previous => {
            return {...previous, name:'MXX'}
        })}>
    	{state.name}	
    </button>

 

자바스크립트의 ... 문법을 통해 객체를 복사하고 새로운 참조값을 만들어 선언해주는 방법을 사용하여야 합니다.

 

 

state 값으로 함수를 선언하지 않고 useCallback이나 useMemo hooks를 사용하여야 합니다.