React - 객체 상태 업데이트

03.15(금) ~ 03.16(토)

✨ 객체 상태 업데이트

1const [filterCondition, setFilterCondition] = useState<FilterCondition>({
2    address: [],
3    date: '',
4    pay: '',
5  });
6
7const updateFilterCondition = (
8    address?: string[],
9    date?: string,
10    pay?: string,
11  ) => {
12    setFilterCondition(prev => ({
13      ...prev,
14      address,
15      date,
16      pay,
17    }));
18  };

React는 상태가 변경되었는지를 판단하기 위해 객체 참조를 사용한다.

따라서 이전 객체와 새로운 객체가 동일한 참조를 가지고 있다면 React는 상태 변경을 감지하지 못한다.

상태 변화를 감지해 재렌더링을 유발하려면, 객체를 복사해 완전히 새로운 객체를 생성하고, 요소를 변경시켜야 한다.

그러면 객체의 참조값이 달라져 React는 상태변화를 감지해 재렌더링을 수행한다.