[React Hooks (1)] Hooks란? 그리고 useState()

 

어쩌다보니 내가 2년차에 현재 회사에 입사 했을 때 모든 웹 개발자는 퇴사하고 없는 상황이었다.

그래서 처음에는 다른 인원에 맞춰 모바일 네이티브 언어로 개발도 했었고 그 뒤로 웹앱과 웹을 하고 있는데 Vuejs와 React를 도입했으나 아무도 가르쳐주는 사람이 없었다.

 

외주 프로젝트가 많은 이상 개발 기간이 넉넉하지도 않고 위의 두 라이브러리, 프레임워크로 개발을 하다보니 최적화된 설계 없이 특정 기능들을 위주로 개발하게 되었다.

특히 React에서는 특정 hooks, 예를 들면 useState와 useEffect의 숫자가 너무 많거나 이외의 hooks를 거의 사용하지 않고 개발하는 상황이 벌어졌다.

 

그나마 필요한 순간마다 공부하여 프로젝트에 적용하였고 프로젝트 사이마다 조금씩 시간이 나면 프로젝트 문서를 작성하며 공부하여 조금씩 업그레이드를 했으나 아직은 턱없이 부족한 것으로 보였다. 그래서 다음 프로젝트의 개발을 시작하기 전에 다시 한 번 React Hooks를 정리하고 가고자 한다.

 

React Hooks란?

React 버전 16.8부터 추가되었으며 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 기능을 사용할 수 있다.

 

React Hooks를 만든 동기

1. 컴포넌트 계층의 변화 없이 상태 로직을 재사용성을 높임

2. 불필요한 로직을 없애고 비슷한 것만 모아 단순화함 (복잡성X)

3. class가 아닌 함수형 컴포넌트를 사용하여 더 간결하고 사용을 쉽게 함

 

React Hooks

React에서 제공하는 hooks는 총 12개이다.

모두 많이 사용하지는 않지만 개인적으로 개발하면서 종종 사용했던 hook은 *표시를 해뒀다.

 

1. useState*
2. useEffect*
3. useRef*
4. useContext
5. useMemo
6. useCallback*
7. useReducer
8. useImperativeHandle
9. useLayoutEffect
10. useDebugValue
11. useDeferredValue
12. useTransition

 

지난 프로젝트를 확인해보니 프로젝트 후반에 Recoil을 사용하긴 했지만 위 12개의 hooks 중 단 4개 밖에 사용하지 않았다는 점을 반성하며 이번 포스팅을 열심히 해야겠다 🥹 (2명이 한 달 반만에 완료한 프로젝트 😭)

 

우선 가장 자주 쓰이는 useState()부터 작성해보려고 한다.

 

1) useState()

함수 컴포넌트에서 상태 관리를 할 수 있도록 도와주는 hook으로 단연코 개발하면서 가장 많이 쓰는 hook이다.

 

사용 방법

import React, { useState } from "react";

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

  return (
    <div>
      <p>총 {count}회 클릭하였습니다.</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
};

export default UseState;

 

react에서 불러온 useState를 불러와 현재 상태 값, 현재 상태를 갱신하는 함수(set), 그리고 괄호 안에는 초기 값을 넣어 사용합니다.

보통 현재 상태를 갱신하는 함수는 set(현재 상태 명)으로 많이 네이밍을 해서 사용하고, 괄호 안의 초기 값은 숫자, 문자, 배열 등 다양한 타입이 올 수 있고 작성하지 않아도 됩니다.

 

 

동작 원리

 

괄호 안의 상태 값을 받아 초기 상태를 설정하고, 지정된 함수를 통해 상태를 갱신하면 컴포넌트가 다시 랜더링 됩니다.

 

이 부분은 좀 더 자세히 찾아보니 setCount는 내부의 _value에 값을 저장하고, useState가 리랜더링 될 때 _value값을 가져와서 변수에 할당하는 형태입니다.

 

따라서 리랜더링이 되기 전에는 set을 해주더라도 값이 변경되지 않아 문제가 생길 수 있으니 주의해야 합니다.

(ex. set 함수를 사용하고 리랜더링이 되기 전에 해당 변수를 사용하면 증가분이 적용되지 않음. 아래 코드 참조)

const[number, setNumber] = useState(0);
const[sum, setSum] = useState(1)

const changeNumber = () => {
	setNumber(1);
    setSum(sum + number);
    connsole.log(sum);	//	값은 sum의 초기 값인 1이다.
}

useEffect(() => {
	changeNumber();
}, [number, sum])

 

 

그래서 랜더링이 된 후 이를 사용하여 로직을 작성하면 좋고, count처럼 단순 number가 아닌 배열(array) 형태로 작성할 경우, set 함수 안에서 임시 변수(prevCount, tempCount) 등을 만들어 얕은 복사(js shallow copy)를 해뒀다가 배열을 조작하는 것이 바람직하다.

 

 

포스팅을 위해 작성한 코드

https://github.com/HyonWooKang/reacthooks

 

 

주요 참고문서

 

리액트 공식 문서

https://ko.legacy.reactjs.org/docs/getting-started.html

시작하기 – React

https://ko.react.dev/

React

 

개인 블로그도 3개 정도 읽었었는데 링크를 분실하여 못 적었습니다 :(

 

 

다음 글

https://spencer.tistory.com/49

[React Hooks (2)] useMemo() 알아보기