[React] useState hook 이해하기

[React] useState hook 이해하기

useState hook

개인적인 생각에 useState hook만 이해하면 react의 50%는 이해했다고 생각한다.

기초적인 내용이지만 그만큼 react의 핵심 내용이라고 볼 수 있다.

따라서 해당 게시글에서 알아볼 내용이 꽤 많다.

자세히 읽어보면 분명히 많은 도움이 될 것으로 생각한다.

(+ 현 게시글 대부분의 코드는 sudo code 이다.)

 

◆ useState

그래서 그 중요한 useState hook이 뭔데?

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

코드로 먼저 살펴보면 아래와 같다.

간단하게 설명하자면

state : state

setState : state를 변경시키는 함수

value : state의 초기값

 

위와 같이 작성하면 이해가 되지 않을 수 있다.

그렇다면 실제 코드처럼 작성해보자.

위 코드를 간단하게 설명하자면

state : count

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

value : 0 - count의 초기값

위와 같이 작성된 코드가 훨씬 이해하기 쉬울 것이다.

 

여기서 꼭 이해하고 넘어 가야하는 내용은 아래와 같다.

useState hook이 state, setState를 return 해준다는 사실만 기억하자.

이해하지 못 하였다면 다시 읽어보고 아래 글을 이어서 읽는 것을 추천한다.

 

◆ state vs 일반 변수

그래서 state가 뭔데?

state는 간단하게 말하면 react에서 중요하게 다루는 변수이다.

그럼 state와 변수의 차이가 무엇일까?

state는 컴포넌트를 렌더링 시킬 수 있는 능력이 있다.

즉 state 값이 변경이 되면 해당 컴포넌트가 렌더링 된다.

(+ 이전, 이후 state 값이 달라야 함.)

 

따라서 아래와 같이 간단하게 구분할 수 있다.

컴포넌트 렌더링과 관련이 있는 변수 : state

컴포넌트 렌더링과 관련이 없는 변수 : let, const (+ var - 쓰지말자 ...)

 

여기서 꼭 이해하고 넘어 가야하는 내용은 아래와 같다.

state는 렌더링과 관련된 중요한 변수이다.

이해하지 못 하였다면 다시 읽어보고 아래 글을 이어서 읽는 것을 추천한다.

 

◆ state 변경시키기 (setState)

위에서 설명하였듯이 state를 변경시키는 방법은 setState를 이용하는 것이다.

위와 같이 setCount(1)을 하게 되면 count는 1로 변하게 된다.

그리고 렌더링을 하게 된다. (아주 중요!!!)

위에서 말했듯이 state가 변하게 되면 렌더링이 된다.

그러나 아래의 경우는 어떻게 될까?

분명 count 값은 1로 변경이 되었다.

그러나 렌더링은 되지 않는다.

react가 렌더링이 되려면 state를 setState로 변경을 해야한다.

그렇지 않으면 react는 state가 변경이 일어났는 지 알 수 없다.

 

여기서 꼭 이해하고 넘어 가야하는 내용은 아래와 같다.

state의 값을 변경하기 위해서는 setState 함수를 사용해야한다.

그래야지만 react가 state 값 변경을 감지하여 렌더링을 시킨다.

이해하지 못 하였다면 다시 읽어보고 아래 글을 이어서 읽는 것을 추천한다.

 

◆ setState로 변경했는데 렌더링이 안돼요.

위와 같은 경우가 분명히 생길 것이다.

언제 위와 같은 경우가 생길까?

state 값이 array, object와 같은 경우가 그렇다.

(+ 이전에 react state compare 함수를 확인하였는데)

(+ 공식 문서에서 사라진 것인지 찾을 수 없어서 정확히 적을 수 없다 ...)

 

아래 코드를 확인해보자.

렌더링이 되지 않는 경우 위와 비슷하게 작성하였을 가능성이 아주 높다.

위와 같은 경우 렌더링이 발생하지 않는다.

react는 이전 state와 이후 state가 변경이 된 경우만 렌더링을 한다.

여기서 아주 중요한 개념이 있다.

변경의 기준이 무엇인지 정확히 알 필요가 있다.

여기서 변경이란 이전, 이후 state의 주소 값이 달라야 한다는 것을 의미힌다.

(+ C, C++을 했다면 포인터 개념으로 접근하면 쉽다.)

(+ 즉 가리키는 포인터의 주소 값이 달라야 한다.)

 

array, object는 모두 object type이고 당연히 주소 값을 가지고 있다.

위와 같은 경우는 주소는 그대로고 안의 값만 변경이 된 것이다.

무슨 말인지 이해가 되지 않을 수 있다.

아래 코드를 확인해보자.

위 코드로 이해가 되었으면 좋겠다.

즉 새로운 배열, 객체를 만들어 setState를 해야한다.

이전, 이후 state의 주소 값이 달라야 하는 것을 알아야 한다.

 

여기서 꼭 이해하고 넘어 가야하는 내용은 아래와 같다.

react는 state를 비교할 때 이전, 이후 state의 주소를 비교한다.

따라서 state 변경 시 새로운 배열, 객체 등을 만들어 setState 해주어야 한다.

이해하지 못 하였다면 다시 읽어보고 아래 글을 이어서 읽는 것을 추천한다.

 

◆ setState로 값을 변경했는데 바뀌지가 않았어요.

setState로 값을 변경했는데 state를 확인하면 이전 값을 가지고 있는 경우이다.

이 경우 대부분의 개발자는 아래와 같이 코드를 작성하였을 것이다.

 

react를 처음 배우면 위 코드와 같이 개발자 의도대로 동작하지 않는 경우가 많을 것이다.

이것은 setState가 비동기로 동작하기 때문이다.

(+ setState를 모아 batch로 적용)

 

만약 비동기가 아니면 어떻게 될까?

setState를 연달아 10번 작성하면 10번 렌더링이 될 것이다.

위와 같이 렌더링이 되면 성능에 심각한 문제가 생길 것이다.

따라서 react 내부적인 알고리즘에 의해 비동기, batch로 setState가 실행된다.

 

그럼 이후 state 값을 알고 싶으면 어떻게 해야할까?

아주 간단한 방법이 있다.

새로운 변수를 만들어 사용하는 것이다.

위와 같이 newCount 변수를 만들어 다음 state 값으로 사용하면 된다.

 

여기서 꼭 이해하고 넘어 가야하는 내용은 아래와 같다.

setState 함수는 비동기로 동작한다.

이해하지 못 하였다면 다시 읽어보고 아래 글을 이어서 읽는 것을 추천한다.

 

◆ 정리, 자가 테스트 및 다음 게시글 소개

이번 게시글은 내용이 너무 많고 다 중요하다.

꼭 모두 이해하고 다음 게시글을 읽는 것을 추천한다.

다음 게시글에서는 이번 게시글에서 설명한 내용을 실습해보려고 한다.

 

이번 게시글을 제대로 이해하였으면 아래 질문에 스스로 답 해보자.

• Q. state와 일반 변수의 차이점?
• Q. state 값을 변경 시키는 방법
• Q. 배열의 경우 setState 시 새로운 배열을 만들어 주어야 하는 이유?
• Q. setState시 다음 state 값을 확인하는 방법?

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.