[React] State 맘대로 변경하는 법

React에서는 useState를 사용하여 상태를 관리한다. 하지만 직접 state를 변경하면 React의 상태 관리 흐름을 깨트려 버린다. 난 이 부분이 React를 공부하면서 헷갈리고 어려웠던 개념이기에 정리를 통한 완벽 학습을 목적으로 글을 써보려한다. 

 

❌ 직접 변경하면 안 되는 이유

React에서는 state가 변경될 대마다 컴포넌트를 다시 렌더링한다. 하지만 state를 직접 수정하면 이를 감지하지 못해 렌더링이 일어나지 않거나, 예상치 못한 동작이 발생할 수 있다. 

const [count, setCount] = useState(0);

// ❌ 이렇게 하면 안 됨!
count = count + 1; // 상태 직접 변경 (React가 감지하지 못함)

그냥 쉽게 이해하도록 설명한다면.. 자료형이 const 인 상태라고 생각했을 때 그 값을 바꾸려고 한다고 생각하면 좀 더 이해하기 쉽다. 그럼 어떻게 변경해줘야 할까?

✅ 올바르게 변경하는 방법

React에서 state를 변경할 때는 항상 setState 함수를 사용한다. 물론 요즘은 아니다. 그치만 소개하겠다.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1); // ✅ 올바른 방법
};

 

쉽게 기초 내용을 코드로 살펴 보게 되면,

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	데이터변경(['1','2','3']); //state를 아예 대체해주는 함수
}

데이터변경에 해당하는 함수로만 state 값을 변경해줄 수 있다고 생각하는 것이 이해하기 편할 것이다. 

그러나, 이런식으로 배열일 경우에 하드코딩 하는 법 말고 좀 더 개발자 스럽게 한다면

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	var newArray = 데이터;
    	newArray[0] = '1';
	데이터변경(newArray);
}

수정된[데이터]를 만드는데, state의 복사복을 만들어서 수정하는 법으로 가능하다.

그러나 이렇게 하면 안되고, deep copy 를 해야한다. 위와 같은 경우는 복사가 아니라 값 공유를 하게된다.

따라서,

let [데이터, 데이터변경] = useState(['모시기','모시기1', '모시기2']);

function 데이터바꾸기(){
	var newArray = [...데이터];
    	newArray[0] = '1';
	데이터변경(newArray);
}

object 의 경우 []를 {}로 바꿔주고 똑같이 spread operator(...)을 사용해주면 된다. 

 

 

마무리

state를 변경하려면 변경함수를 써야한다, 변경함수(대체할 데이터) 

state는 직접 건들지말자.

deep copy를 하고 그것을 건들자!