[React] useState가 여러 개일 때 깔끔하게 정리하는 방법

Before

import React, {useState} from 'react';

const Sample = () => {

    /* writer useState */
    const [writer, setWriter] = useState('Shawn');
    const writerHandler = (e) => {
    	setWriter(e.target.value);
    }
    
    /* content useState */
    const [content, setContent] = useState('');
    const contentHandler = (e) => {
    	setContent(e.target.value);
    }
    
    return (
    	<div>
            <input value={writer} onChange={writerHandler} />
            <input value={content} onChange={contentHandler} />
        </div>
    )
    
}

위 코드에서 input은 2개이고, 따라서 저장해야 하는 데이터의 값도 2개이기 때문에 useState도 2번 사용되었다.

예시에서는 2번뿐이지만, 만약 10개 이상이라면? 아마도 useState의 반복 때문에 코드 전체가 지저분해 보일 수 있다. 그럴 때는 간단하게 useState를 객체화하여 한 군데 모아버리면 된다.

 

After

import React, {useState} from 'react';

const Sample = () => {

    const [state, setState] = useState({
    	writer: 'Shawn',
        content: ''
    })
    
    const stateHandler = (e) => {
    	setState({
            ...state,
            [e.target.name]: e.target.value
        })
    }
    
    return (
    	<div>
            <input name="writer" value={writer} onChange={stateHandler} />
            <input name="content" value={content} onChange={stateHandler} />
        </div>
    )
    
}

우선 하나로 합치기 위해 useState 안에 객체로 상태값들을 모두 집어넣어 줬다. 이런 식으로 객체의 프로퍼티로 들어가게 되면, 바닐라 JS와 똑같이 state.writer 이런 식으로 불러오면 된다.

 

상태값이 객체이기 때문에 setState() 또한 객체로 불러와야 한다. 그 안에는 ...state와 [e.target.name]: e.target.value가 있는데 이것을 이해하는 게 키포인트이다.

전개 연산자를 통해 state의 객체를 모두 불러온 것이기 때문에 사실상 setState({writer: 'Shawn', content: ''})와 같다. 그 이후 [e.target.name]을 통해 입력 이벤트를 수행한 input의 name을 불러오고 그 상태값의 value를 e.target.value로 다시 저장해주는 것이다. (input 태그에 name 값을 state의 이름과 똑같이 설정해줘야 한다.)

 

여기서 ...state를 왜 사용하는 지 알아야 한다. 그냥 [e.target.name]: e.target.value만 넣으면 안 될까?

위에서 ...state는 state 객체 안에 있는 프로퍼티들을 모두 전개해주는 전개 연산자라고 했다. setState()는 상태값을 계속 저장해주지 않는다. 예를 들어 a라는 state에 1을 저장했고, b라는 state에 2를 저장했다고 하자. 그럼 setState()는 {a: 1, b: 2} 이런 식이 될 것이다. 하지만, 중간에 모르고 {a: 1}만 해버렸다면 b에 저장된 2는 그대로 날라가게 된다. 따라서, 항상 복수의 useState 객체를 사용하는 상태값 변화 함수를 쓸 땐 모든 state를 고려해야 한다. 이를 방지하면서 더 효율적으로 사용하기 위해 전개 연산자를 사용하는 것이다.

 

이런 식으로 사용하면 useState를 한 번만 사용할 수 있어서 깔끔한 코딩을 할 수 있다.

 

1. useState가 많을 때는 객체로 싸그리 넣어준다.
2. setState(상태값 변화 함수)를 사용할 때도 객체로 상태값 각각을 제어해야 한다.
3. 제어 연산자와 태그의 name 속성을 이용해서 상태 값을 간단하게 제어할 수 있다.