리액트 useState란?

리액트 useState

useState란?

state란 변수이다 단 값이 변하게 되면 렌더링이 일어나게 되는 변수입니다

아래에서 설명하겠지만 state가 변하게 되면 해당 state를 구독하고 있는 컴포넌트들이 재렌더링을 하게됩니다

이러한 state의 값을 바꿔줄 수 있는 함수가 바로 setState()입니다

간단 정리

코드로 정리하면 다음과 같습니다

const [state, setState] = useState(initValue)

값 변경

setState를 통해 값을 바꾸는 방법은 예시로 설명하면 다음과 같습니다

// ex) 1
const [num, setNum] = useState(2);

console.log(num); // 2
setNum(3);
console.log(num); // 3

// ex) 2
const [obj, setObj] = useState({ a: 'A', b: 'B' });

console.log(obj); // { a: 'A', b: 'B' }
setObj({ ...obj, b: 'haha im C' });
console.log(obj); // { a: 'A', b: 'haha im C' }

위 두 예시처럼 useState는 간단하게 이루어져 있습니다

여기까지만 봐도 당장 useState를 사용하는데는 큰 이상이 없습니다

그런데 특이한 점이 있습니다

ex) 2 같은 경우에 객체를 스프레드로 풀어서 넣어줬는데요

객체를 그냥 바꿔서 넣어주는 것이 아닌 스프레드로 풀어서 넣어준 이유가 있습니다

상태 변경 감지

리액트는 상태가 바뀐 것을 감지할때 메모리 주소가 변경됬는지를 통해 상태 변경을 감지합니다

자바스크립트의 객체는 얕은 복사, 깊은 복사라는 개념이 있습니다

해당 내용에 대한 더 자세한 내용은 검색해보시길 바랍니다

우리가 상태를 변경하려할때 리액트에게 상태 변경을 감지시켜주기 위해서 새로운 메모리주소를 가진 객체를 만들어서 setState에 넣어줘야 리액트는 상태를 변경하게 됩니다

또한 state에 직접 접근해서 상태를 변경할순 없습니다

const [obj, setObj] = useState({ target: 'nope' });

obj['newTarget'] = 'try!'; // error

무조건 setState를 통해서만 변경할 수 있습니다