React] Hook : useState

useState

Component가 가지고 있는 상태값으로 컴포넌트 내부에서의 동적 데이터입니다.

흔히 많이 사용되는 변수라고 생각하면되지만, 아래와같은 특징이 있기 때문에 변수랑은 느낌만 같지 많이 다릅니다.

const [변수이름, set변수이름] = useState(초기값);

 

set변수이름은 다른 이름을 넣어도 되고, 선언하지 않아도 상관없습니다.

변수에 값을 직접 대입하는 것이 아니라, set을 통해 값을 대입해줍니다.

 

• state값이 변하게 되면 UI가 리렌더링 된다.
• useState는 비동기로 동작한다.

 

 

---

 

 

예

 

input태그의 값을 입력해 주면서 content라는 state값을 확인할 수 있게 작성하였다.

content선언할 때는 "" 빈문자열로 초기값을 설정해 주고,

onChange함수의 event객체를 활용하여 content값을 업데이트해줍니다.

 

 

---

 

 

변수와 state의 차이

처음 React와 hook을 접하게 된다면, 왜 굳이 useState를 사용해서 변수의 값을 바꾸는 귀찮음을 감수해야 되는지 한 번쯤 생각할 수 있습니다. (저는 그랬습니다...)

 

바닐라 JS나 JQuery 등과 같은 경우는 DOM에 직접 접근하여 value나 text값을 입력하면서 구현했지만,

리액트에서는 state값을 setState로 입력해 주면서 화면을 리렌더링 하면서 표현하게 된다.

 

그렇다고 리액트에서 일반적인 변수를 사용하지 못하는 건 아닙니다.

다만 state값이 변하게 되면 화면이 리렌더링 되면서 화면을 다시 그리게 되고(리액트의 기본 원리), 변수가 계속 초기화되기 때문에 상황에 맞게 잘 사용해야 된다.

 

 

---

 

 

예

 

위 소스에 localValue라는 let타입의 변수를 하나 선언하였습니다.

초기값은 test로 하였고, input태그의 onChange함수가 동작할 때 setState와 같이 값을 넣어줬습니다.

state로 선언한 content와는 달리 화면에 그려지는 값은 계속 test임을 확인할 수 있습니다.

 

이는 위에서 설명한 내용과 같이 state값이 계속 바뀌게 되면서 화면이 리렌더링 하게 되는데,

리렌더링이 이럴 날 때마다 Content함수가 다시 실행되게 되고,

실행될 때마다 localValue가 재정의 되어 e.target.value가 추가된 값이 아닌 let localValue = "test"가 계속 실행되면서

test로 정의되기 때문에 값이 변하지 않는 것처럼 보이게 된다.

(정확히는 한 글자 입력할 때 localValue의 값은 변하지만, 리렌더링 되면서 초기화됨)

 

 

---

 

 

useState는 비동기로 동작한다.

예시로 작성한 코드는 간단하지만, 실제 페이지를 구현하면 수많은 state가 존재합니다.

그러면 state값이 변할 때마다 리렌더링이 발생하게 되는데, 그 많은 값들이 실시간으로 변하여 동기로 리렌더링이 발생하면 아무리 가상 DOM을 사용하더라도 성능저하가 발생할 것이다.

따라서 비동기로 batch를 통해 동작하게됩니다.

 

아래 게시글에서 가상 DOM관련해서 react 동작 원리를 다시 한번보면 좋을 것 같습니다.

2023.06.04 - [Front-End/React] - React] React 란...?

 

 

---

 

 

예

 

많은 블로그나 인터넷에 돌아다니는 counter를 예시가 있지만, 그래도 조금은 다르게 string으로 해봤습니다.

(크게 다른 건 없지만...)

마지막 글자인 "다"만 추가되고 나머지는 추가되지 않는 모습을 확인할 수 있다.

맨 위에서 적었듯이 setState는 비동기로 동작하기 때문에 content에 추가된 값을 기억하지 못하고 마지막 "다" 문자만 실행된 것처럼 보이게 됩니다.

 

 

---

 

 

해당 글은 useState를 설명하려고 작성한 것이고, 
마지막에 다뤘던 useState가 비동기로 처리된 것을 인지하고,
useState를 동기적으로 처리하는 건 따로 다룰 것입니다.
간단히 해결방법은 useEffect나 콜백함수 활용...