setState 객체에 값 넣고 싶을때

개발을 하면서 state에 꼭 하나의 값이 아닌 객체로 잡아야하는 경우가 생긴다.

예를 들어 어떤 주문과 관련된 상태와 로딩창의 오픈 여부를 같은 컴포넌트에서 구현해야 하는 경우

state = {
	olderInfo: {
    		주문자: aa,
        	가격: bb,
        	등등
        	},
    loadingImg: false
    }

위와 같이 표현할 수 있겠는데

나도 위와 같이 작성 후

setState로 주문자의 데이터만 바꾸려고 이전에 알고있는대로 시도를 해보니

어떻게 해도 원하는대로 동작을 하지 않았다.

 

우선 원인으로는

렌더링은 state 값이 변경될 때 되는데

loadingImg와 같은 단순 값은 다른 값이 들어왔을때 변화가 되었다는 것을 바로 알 수 있지만

객체의 경우 해당 주소값을 조회하기 때문에

안의 값이 바뀐다고 하더라도 주소가 동일하면 값이 바뀌었다고 인식을 하지 못한다.

 

그래서 사용하는 방식이 바로 스프레드 연산자를 활용하는 방식이다.

코드로는 앞에 ...(점 세개)를 붙이는 건데

이렇게 하면 점 뒤에 붙는 배열을 복사할 수 있다.

 

즉 완전히 다르지만 같은 값을 가진 하나의 배열을 만들어

원하는 데이터만 변경해주고 그 바뀐 배열을 state에 통째로 바꿔버리면 반영이된다.

 

코드로는 아래와 같다.

this.setState({orderInfo: {...this.state.orderInfo, 주문자:원하는데이터}})