[React] useState 이해하기

강의 하나를 완강하고 (사실 예전 강의라서 당장 써먹으려니 힘들었다..) 기존 Vue로 만들었다가 잠적 중단 시켜뒀던 프로젝트를 다시 시작해보려고 했다..

 

하지만 막상 쓰려니 강의에서 썼던 setState가 아니라 useState를 사용하라고 한다.. 요즘은 setState는 옛날 거라면서 ..

이해했다. 그래서 useState를 쓰려고 예제를 보고 이걸 바로 적용시키려고 하니 내가 머리가 받아주질 않는다.

 

아니 도대체 어떻게 동작하는 거고, 어떻게 쓰는 건데?

 

그래서 이것에 대해 이야기를 하며 내 스스로가 좀 배우고 깨닫길 바라는 마음으로 글을 작성하려고 한다.

 

useState?

 

useState는 배열을 return해주는 함수이다.

 

예제로는

const [state, setState] = useState(value);

- state : state 

- setState : state를 변경시키는 함수

- value : state의 초기 값

 

다르게 예시를 살펴보자.

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

 

- setCount : count를 변경시키는 함수

- value : 0 -> count의 초기값이다.

 

여기서 useState hook이 state, setState를 return해준다는 사실 하나만 기억하면 된다고 한다.

 

 

state 와 일반 변수? 

state : state의 값이 변경되면 컴포넌트는 렌더링된다.

(이전 state값과 비교하여 이후 state값이 변경된다면 컴포넌트가 렌더링) 

 

즉 let, const 은 컴포넌트 렌더링에 관여하지 않는 변수라는 점에서 다르게 동작한다. 

 

state 변경시키기

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

 

setCount(1)을 통해 초기값 0을 가졌던 count 함수는 1이 되게 된다.

 

여기서 주의할 점은 꼭 setState함수를 이용하여 state의 값을 변경시켜야 렌더링이 된다는 것이다.

만약 

count = 1;

위와 같이 count의 값을 변경시켰다면 렌더링은 일어나지 않는다. react가 state의 값이 변경됨을 감지하기 위해선 setState를 써야만 한다.

 

 

setState 값이 array, object인 경우?

 

여기서 state값이 변경된다는 것의 의미를 정확히 짚고 넘어가야 한다.

object type의 state의 값이 변경된다는 의미는 state의 주소 값이 변경된다는 것을 의미한다

 

만약

const [arrNum, setArrNum] = useState([1, 2, 3]);
arrNum.push(4);

와 같이 코드가 작성되어 있다면 arrNum은 기존 arrNum의 값을 그대로 변경시켜버린다.

즉, 주소 값이 변경되지 않고 기존의 object를 변경시키는 것이다.

 

이에 대한 방안으로는 밑의 방법이 하나의 예시라 할 수 있겠다.

const [arrNum, setArrNum] = useState([1, 2, 3]);
let newArrNum = arrNum.concat(4);

setArrNum(newArrNum);

 

이렇게 된다면 newArrNum이라는 새로운 객체 안에 기존 arrNum의 내용에 우리가 추가 하고자 했던 4를 넣은 배열이 그 값을 갖게 된다.

 

+ 참고로 setState는 비동기로 작동된다고 한다.

 

보고 공부 한 블로그 

https://codiving.kr/149