리액트(react) useState를 사용하는 이유, 주의 사항

useState

데이터를 state로 관리하기 위해 사용하는 방법이다.

나도 처음엔 의문이 들었다.
함수형 컴포넌트에서 state를 사용하지 않아도 충분히 변수를 만들고 값을 넣을 수 있는데, 왜 사용해야하나?
이유는 리렌더링을 위해서이다.

렌더링의 조건은 여러가지가 있다

1. state가 변경되었을 때
2. props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링 되었을 때
4. 강제로 리렌더링 했을 때 (forceUpdate)

우린 여기서 1번 state가 바꼈을 때를 봐야한다.
state를 변경한다는 것은. 단순히 어떤 변수값이 변경했다고 리액트에서 state 변경으로 인식한다는 의미가 아니다.

아마 모든 변수가 변경될 때 마다 리렌더링 된다면 js 코드를 작성하지 못할 것이다.

따라서 우리는 데이터 값이 변경되면 그에 맞게 리렌더링을 하기 위해 데이터를 state 상태로 관리한다.

useState 사용법

const [변수명 , 변수를 변경할 함수 명] = useState(초기 값)
//ex const [age, setAge] = useState(30)

그리고 age를 변수로 사용하면 된다. age값이 변경될 경우 리렌더링이 되면서 바뀐 데이터가 적용된 부분을 렌더링하게 된다.
여기서 중요한 부분은 const로 선언하는 것과, setAge(변경할 함수)로 값이 변경해야 한다는 점이다 .

우선 const로 선언하는 이유가 2번째 이유와 비슷하게 변수 재할당을 통해 변수 값을 변경시키는 행위를 막기 위해서이다.

let[age, setAge] = useState(30)
age = 40
console.log(age) >> 40
setAge(50)
console.log(age) >> 40

이렇게 let으로 선언하면 재 할당이 가능한데 문제가 하나 있다.
setAge로 변경하는 값이 적용되지 않는 다는 점이다. 만일 이런 상황이 된다면 데이터가 쌓여 예상치 못한 오류를 범할 수 있고 state관리를 하기 어려워진다.

또한 이런 재할당 방식은 리액트가 state 변경을 인지하지 못하고, 렌더링하지 않는다.
따라서 우리는 원하는 동적 움직임을 보여줄 수 없게 된다.

결론.
꼭 setAge를 통해 변수를 변경하여 state가 변경된 사실을 리액트가 알 수 있게 해야하며, 그에 따라 렌더링이 되도록 하는 것이 바람직하다.