TIL 230811 : react 접해보기 2 (useState, hooks)

지난 시간 리액트 기본 환경세팅과 컴포넌트의 동작 구조에 이어서 리액트의 가장 기본이 되는 훅 중 두가지인 useState와 useEffect에 대해 정리해보려 한다.

---

React hooks

리액트 훅은 16.8버전에 도입된 라이브러리로서, 기존의 클래스를 이용했던 개념을 대체해 함수형 컴포넌트에서도 이를 편리하게 사용할 수 있게 해주는 개념이다.

이에 리액트에서는 기본적으로 제공하는 hook들이 몇가지 있는데 아래와 같다.

 

기본 지원 hook

1. useState
컴포넌트의 state(상태)를 관리 할 수 있다.
상태에 따라, 다른 화면 출력

 

2. useEffect
렌더링 이후에 실행할 코드를 만들수 있다.
어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다.

 

3. useContext
부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다.

 

4. useReducer
state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다.

 

5. useRef
컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.

 

6. forwardRef
useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다.

 

7. useImperativeHandle
useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의 할 수 있다.

 

8. useMemo, useCallback
의존성 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다. ( 재랜더링시 정의 안함 )

 

8. useLayoutEffect
모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있다.

 

9. useDebugValue
사용자 정의 Hook의 디버깅을 도와준다.

 

이 중에서 useState와 useEffect를 가장 많이 사용한다고 한다.

 

 

---

useState

 

import

우선 리액트에서 기본으로 제공하는 기능이라, 위와 같이 import 를 해주면 메소드를 사용가능하다.

 

 

기본구조

  const [info, setInfo] = useState('초기값')

위와 같이 useState()는 괄호 안에 파라미터를 갖는 함수이다.

그리고 그 리턴 값으로는 2개의 값을 갖는 배열을 주는데,

처음은(info) 그 변수가 가지고 있는 값이고

두번째는(setInfo) 처음 설정한 변수의 값을 바꿔주는 setter 함수이다.

 

const [info, setInfo] = useState('초기값')
  
console.log(info) // '초기값' 출력
  
setInfo('변경값')
console.log(info) // '변경값' 출력

 

useState를 쓰는 이유

왜 쓰는지가 중요하다.

쉽게 말하자면 바뀔때 렌더링이 되게 할 수 있다.

다시 말해 SPA를 위한 기능이다.

 

렌더링이 되기 위한 조건

다시 말해, 화면에 업데이트 된 내용이 반영이 되려면 아래와 같은 조건이 필요하다.

• state 또는 Props가 변경
• 부모 컴포넌트가 렌더링
• forceUpdate 사용

여기서 state가 변경이 되려면 변수의 참조값이 변경이 되어야하는데

만약, info값을 직접 변경해 주게되면 이는 변경을 감지하지 못 하게 되고 리렌더링이 발생하지 않게 된다.

setInfo로 info의 값을 바꿔주면 set함수안에 있던 render();가 실행되고 화면에 바로 적용이 된다.

 

애초에 const

애초에 info는 const로 선언되어 있다.

직접적인 방법으로는 값의 변경이 어렵다.

 

이를 통해 state값은 렌더링이 잦은 즉, 함수가 반복되어 실행될 일이 많은 환경에서

메모리 주소 변경없이 데이터를 유지할 수 있게 된다.