리액트 훅

리액트 훅

클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업한다. 기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기 때문에 상태 로직의 재사용이 불가능하였지만 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었다.

리액트 훅 사용 규칙

• 최상위 레벨에서만 호출 가능, 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 X
• 오직 리액트 함수 컴포넌트 내에서만 호출 가능

---

usestate()

• 상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API, 초기 상태와 현재 상태를 저장, 컴포넌트가 다시 렌더링 되어도 유지된다는 장점이 존재한다.

• 하지만 하나의 상태를 여러 컴포넌트에서 사용하게 되는 경우 매번 props를 전달해야 하여 불필요한 코드 중복과 오류가 생길 수 있기 때문에 이 경우에는 Redux 또는 Recoil과 같은 전역 상태 라이브러리를 이용하여 관리하는 것이 권장됩니다.

---

useEffect()

side effect를 발생하는 작업을 수행한다. side effect란 다른 컴포넌트에 영향을 줄 수 있고 렌더링 과정에서는 구현할 수 없는 작업입니다. 그 예로는 컴포넌트 안에서 데이터를 가져오거나 구독하기 DOM을 직접 조작하기 등이 있습니다.

1. 렌더링 후 단 한번만 실행하고 싶을 때 사용
2. useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 한다. 즉 useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해주는 함수.
3. 정리하자면 usestate로 상태를 유지시킴 && 데이터의 변경을 원한다면 usestate+useeffect

---

useContext()

인자로 context 객체를 받아 객체의 현재 값을 반환. context 객체는 useContext가 호출된 컴포넌트
에서 가장 가까이에 위치한 <Context.Provider>의 props로 전달된 value에 따라 값이 변경된다. 또한, 값이 변경될 때마다 이 훅을 호출한 컴포넌트는 리렌더링된다.

---

useReducer()

• useState()의 대체 함수로 다양한 컴포넌트 상황에 따라 상태 값을 설정하는 훅 API입니다.

• ex: 로그인 유저의 role에 따라서 페이지의 구성을 다르게 한다거나 or 네비바 메뉴를 다르게 한다는 식으로 사용

• useRecuder()는 첫 번째 인자로 현재 상태(state)와 행동(action)을 인자로 받는 reducer 함수를, 두 번째 인자로 상태의 초기값을, 세번째 인자로는 상태 초기화 함수를 넣고 현재 상태(state)와 액션을 발생시키는 함수(dispatch)를 반환합니다.

• Counter 컴포넌트 내 버튼을 클릭하면 dispatch 함수에 의해 각 버튼마다 다른 액션 객체가 설정된다. 또 dispatch는 reducer를 호출하여 reducer가 주엊니 액션 객체 값에 따라 상태 변경을 하도록 한다. 이 때 reducer 함수에서 상태 변경이 이루어질 때는 반드시 불변성을 지켜야 한다

• 이러한 useReducer()는 useState()에 비해 유동적으로 상태를 관리할 수 있고, 상태 관련 로직을 컴포넌트 밖으로 꺼낼 수 있다는 장점이 존재한다.

---

useCallback()

렌더링 최적화에 사용하는 훅 API로 렌더링 과정에서 두 번째 인자로 주어진 의존 배열(dependency)의 값이 바뀌면 첫 번째 인자로 주어진 콜백함수(callback)를 새로 생성하여 반환한다.

참고로, 의존 배열에 따른 작동 방식은 useEffect()와 같이 배열을 넣지 않은 경우에는 매 렌더링마다, 빈 배열을 넣는 경우에는 마운트 때에만, 특정 값을 넣는 경우에는 특정 값이 변하여 렌더링될 때에만 해당 훅 API가 실행된다.

---

useMemo()

연산 최적화에 사용하는 API로 렌더링 과정에서 두 번째 인자로 받은 의존 배열(dependency)내 값이 바뀌는 경우에만 첫 번째 인자로 받은 콜백함수를 실행하여 구한 값을 반환하는 함수이다.

의존 배열에 따라 콜백함수를 실행하여 반환값을 기억한다는 점에서 useCallback()과 비슷한 점이 있지만, useMemo()는 숫자 또는 문자열, 배열, 객체 등의 값을 반환하고 useCallback()은 함수를 반환한다는 점에서 차이가 있다.

---

useRef()

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 하는 훅 API이다. useRef()는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환한다. 이 객체는 컴포넌트의 전 생애주기동안 유지되며, ref.current와 같이 current 속성에 접근하여 현재 가리키는 객체에 접근할 수 있습니다.

또한, 이는 가변 값을 유지하기 편리하다는 장점이 있다.