React.js에서 상태변수 변경하기

리액트에서 useState의 상태 변수를 변경하기 위해 아래와 같이 setState를 사용한다.

const [count, setCount] = useState(0);
setCount(count + 1) // count에서 +1

잘 알다시피 상태변수에 직접 접근해서 변경한다면 재 랜더링이 일어나지 않아 문제가 발생할 소지가 있기 때문에 보통 setState를 사용한다.

상태변수에 객체나 배열이 저장되어 있을 때는 아래와 같이 상태변수를 변경할 수 있다.

const [object, setObject] = useState({
	a: 1,
    b: 2
})   

setObject({
	a: 4,
    b: 6
})

setState를 사용할 때 주의할 점이 있다. 리액트는 얕은 비교를 사용한다. 그렇기 때문에 아래 코드처럼 같은 메모리 주소를 가진 객체를 매개변수로 사용한다면 재랜더링이 일어나지 않는다.

const [object, setObject] = useState({
	a: 1,
    b: 2
})   

object.a = 3
setObject( object )

그렇다면 새로운 객체를 생성해야한다. 하지만 위처럼 매번 직접 새로운 객체를 만들어 setState에 매개변수로 넣어준다면 무척 번거로운 작업일 것이다. 예시로 아래와 같이 상태변수에 여러 속성이 존재한다면 문제가 발생한다.

const [object, setObject] = useState( {
	a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    f: {
    	g: 6,
        h: 7,
        i: 8
    }
})   

심지어 객체를 직접 만든다면 f 속성에 저장되어 있는 객체 또한 만들어주어야한다.

spread를 사용한 객체,배열 복사

위와 같은 문제를 해결하는 방법은 흔히 아래와 같이 객체나 배열을 복사한 뒤 상태변수를 변경하는 것이다.

1. Object.assign() 사용하기

let newObject = Object.assign( {}, object )
        newObject.a = 2;
        setObject(newObject);

object 객체를 복사하여 새로운 객체를 반환하는 Object.assign을 사용한다.

2. JSON 사용하기

let newObject = JSON.parse(JSON.stringify(object));
newObject.a = 2;
setObject(newObject);

객체를 Json 형식으로 변환 후 다시 객체로 변환 시 새로운 객체가 반환되기 때문에 이와 같은 방법을 사용할 수 있다.

3. spread operator

setObject( {...object, a: 2 })

spread를 사용하면 좀 더 간결한 코드를 작성 할 수 있다.
spread와 {} 중괄호를 사용하여 새 객체를 만들 수 있으며 위와 같은 문법을 사용하여 a 속성의 값을 수정할 수 있다.

활용 사례

게시판에서 페이지를 onClick 시 nowPage의 값을 수정하려했다. 위와 같이 여러 방법이 있겠지만 나는 spread 연산자를 사용했다.

nowPage를 수정하려면 먼저 info 변수에 접근하고 pageAndSort 변수에 접근해야한다. 위 이미지와 같이 실행했을 때 먼저 info 객체를 복사하고 pageAndSort 속성의 값을 수정한다. 이때, pageAndSort 또한 복사하고 nowPage 속성을 수정하면 성공적으로 상태변수가 수정된다.