React hooks의 useState에서 Spread 응용 메모

useState 를 통해 state 를 다룰 때 단순한 단일의 값이 아닌 배열이나 오브젝트의 형태로 처리하고 싶을 때가 있다.

값을 여럿 늘여써도 결과는 같아도 코드의 가독성이나 관리의 편의성을 생각했을 때 오브젝트로 처리해야 하는 경우가 생긴다.

이 때 ES6에서 추가된 Spread 연산자를 사용한다면 좀더 직관적이고 간편하게 이를 처리할 수 있다.

기본적인 형태는 다음과 같다.

1
2
3
4
5
6
const [state, setState] = useState({
    key1: value1,
    key2: value2
});
setState({ ...state, key: value });

위와 같은 문법으로 useState 를 사용할 경우 원하는 값을 해당 state object의 내부에 추가하거나 혹은 수정할 수 있다.
Spread 연산자를 이용하여 기존의 state값을 전부 복사한 뒤 직접 명시한 값을 추가(혹은 수정)하는 원리이다. Spread 연산자 없이도 물론 구현이 가능하겠지만 Spread 연산자를 사용하면 코드가 한결 간결해지니 사용하지 않을 이유가 없다.

여기서 추가로 응용을 하고자 한다면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [state1, setState1] = useState({});
const [state2, setState2] = useState({});
const [state3, setState3] = useState({});
const [states] = [state1, state2, state3];
const [setStates] = [setState1, setState2, setState3];
states[0]; // state1
// setState3
setStates[2]({
    ...states[2],
    key: value
});

위와 같이 여러개의 오브젝트형 state들을 한 곳에 묶어서 관리할 수도 있다.