[React] State와 useState

State는 컴포넌트 안에서 변경될 수 있는 데이터들을 관리하는 데 사용한다. 또한 state 데이터가 변경이 되면 react는 render 함수를 호출해서 화면에 변경된 값을 바로 보여준다.

 

state는 클래스형 컴포넌트에서만 사용이 가능했는데 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 state 사용이 가능해졌다. Hooks 중에서 state를 관리하는 것이 useState이다.

useState

useState는 state 데이터를 관리해주는 함수로 인자 값으로는 state 데이터의 초기값을 받는다. 그리고 배열을 반환하는데 첫 번째 인덱스에는 현재 state 값이 있고 두 번째 인덱스에는 state 데이터를 변경해주는 함수가 있다. state를 사용하고 싶으면 다음과 같이 작성한다.

import React, { useState } from 'react'

const App = () => {
    const [value, setValue] = useState(0);
}

useState의 set 함수를 사용해서 state를 변경해도 즉시 반영되지 않는다. 그 이유는 set 함수가 asynchronous 즉 비동기적으로 동작하기 때문이다. 즉, state가 변경되고 re-rendering이 호출되면서 변경된 state가 반영된다.

const [value, setValue] = useState(0);

setValue(value + 1);
setValue(value + 2);
setValue(value + 3);

// set 함수는 비동기로 동작하기 때문에
// 각 set 함수가 사용하는 value는 모두 변경되기 전인 0이다.
// 그래서 value는 6이 아니라 3이 된다.

만약 새로운 state 값이 이전 state 값을 필요로 한다면 Functional Updates를 사용해서 state를 변경해줘야 한다. set 함수의 인자 값으로 콜백 함수를 보내줄 수 있는데, 콜백 함수는 인자 값으로 이전 state를 받고 새로운 state를 반환한다.

const [value, setValue] = useState(0);

setValue(prevValue => prevValue + 1);
setValue(prevValue => prevValue + 2);
setValue(prevValue => prevValue + 3);

// 위 방식대로 하면 value는 6이 된다.

현재 state와 다음 state의 값을 비교할 때 Shallow Compare를 사용한다. Shallow Compare는 숫자나 문자열의 같은 경우에는 그들의 값을 비교 하지만 Object (객체나 배열)인 경우에는 그들의 reference 값을 비교를 한다. 그래서 state 값이 Object인 경우에는 그들의 reference 값을 바꿔줘야 state가 변경되었다고 판단하여 re-rendering을 한다. 

 

state가 배열일 때 변경하고 싶다면, useState에 인자값을 전달할 때 새로운 배열을 반환하는 map이나 filter 함수를 사용한다.