목적
React 공부를 하고 있던 나는 useState, useEffect 말고도 다양한 React Hook이 있다는 것을 알게 되었는데, 처음에는 "지금 당장은 필요 없으니까 나중에 배워야지"라는 생각으로 아무렇지 않게 넘어갔다. 하지만 최근에 지금 당장에도 많이 사용하는 Hook인 useState, useEffect마저도 정의같은 것들을 애매하고 옅게 알고 있다는 생각이 들어, 자주 사용되는 다양한 Hook들에 대해 자세히 알고 있으면 지금 당장에는 사용하지 않더라도 도움이 될 것이라고 생각해 이 글을 쓰게 되었다.
Hook이 뭐죠
리액트의 Hook은 함수형 컴포넌트에서 상태(state) 관리와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 함수들이다. 원래는 클래스형 컴포넌트에서만 상태나 생명주기 메서드를 사용할 수 있었는데, React 16.8부터 도입되어 함수형 컴포넌트에서도 이러한 기능을 쉽게 사용할 수 있게 되었다.
상태(State)
리액트에서 상태는 컴포넌트가 가질 수 있는 동적인 데이터를 말한다. 상태는 컴포넌트가 사용자와 상호작용하는 방법에 영향을 주며, 상태가 변경되면 해당 컴포넌트는 자동으로 다시 렌더링된다.
생명주기(Lifecycle)
리액트에서 생명주기는 컴포넌트가 태어나고, 업데이트되고, 사라지는 과정을 말한다. 리액트 컴포넌트는 생성, 업데이트, 소멸의 주기를 거치며, 각각의 단계에서 특정한 작업을 수행할 수 있다. 이 작업들을 생명주기 메서드나 Hook을 통해 제어할 수 있다.
Hook의 장점
상태 관리 로직 단순화
함수형 컴포넌트에 상태를 추가하여 전반적인 로직을 단순화하고 코드를 이해하기 쉽게 만들 수 있다.
코드 재사용성과 기능 분리
컴포넌트의 구조를 바꾸지 않고도 여러 컴포넌트에서 상태 관리 로직을 공유할 수 있다.
사이드 이펙트 감소
함수형 컴포넌트에 생명주기 메서드와 유사한 기능을 제공하여 사이드 이펙트를 더 효율적으로 처리할 수 있다.
사이드 이펙트
사이드 이펙트(Side Effect)는 프로그래밍에서 함수나 메서드가 본래 의도된 작업 외에 다른 상태를 변경하거나 영향을 미치는 행동을 말한다.
Hook의 종류
1. 상태 관련 Hook
- useState: 컴포넌트의 상태를 선언하고 업데이트할 수 있게 해주며, 클래스 컴포넌트의
this.state를 대체하는 Hook이다.
const [state, setState] = useState(0);- useReducer: 복잡한 상태 로직을 다룰 때 사용되는 Hook이다. 상태와 상태 업데이트 방법을 구분하고, 액션에 따라 상태를 변경해준다.
const [state, dispatch] = useReducer(reducer, initialState);2. 부수 효과 관련 Hook
- useEffect: 컴포넌트가 렌더링되거나 상태가 업데이트될 때 사이드 이펙트를 처리하는 Hook이다.
useEffect(() => {
// 부수 효과 로직
}, []); 두 번째 argument(인자)인 대괄호 안에는 변화를 감시할 값이 들어간다.
- 대괄호 안에 값이 들어 있다면 그 값이 변화할 때마다 코드가 실행된다.
- 대괄호 안에 값이 없다면 컴포넌트가 처음 렌더링될 때만 실행된다.
- 두 번째 인자(대괄호)가 없다면 컴포넌트가 렌더링 될 때마다 실행된다.
3. 참조 및 성능 관련 Hook
- useRef: DOM 요소에 직접 접근하거나 컴포넌트 간의 값을 저장하고 참조할 수 있게 해주며, DOM에 직접 접근할 때 주로 사용된다.
const ref = useRef(initialValue);- useMemo: 값의 계산 결과를 메모이제이션하여 성능을 최적화한다. 의존성 배열이 변경되지 않는 한 이전 값을 재사용한다.
const memoizedValue = useMemo(() => computeValue(), [dependencies]);- useCallback: 함수를 메모이제이션하여 재사용 가능하게 하여, 종속성 배열이 변경되지 않는 한 새로운 함수를 생성하지 않도록한다.
const memoizedCallback = useCallback(() => {
// 콜백 코드
}, [dependencies]);메모이제이션
리액트에서 성능을 최적화하기 위해 사용되는 기법으로, 이미 계산된 값이나 함수를 저장하고 필요할 때 재사용함으로써 불필요한 계산이나 렌더링을 줄이는 기법이다.
의존성 배열
메모이제이션을 적용할 값들을 부르는 말이다.
종속성 배열
메모이제이션된 함수를 언제 재생성할지를 결정하는 배열이다.
4. 컨텍스트 관련 Hook
- useContext: Context API를 통해 전역적으로 데이터를 관리하고 쉽게 접근할 수 있게 해준다. 여러 컴포넌트에서 전역 상태나 테마를 적용할 때 유용하다.
const value = useContext(MyContext);
Context API
React에서 전역 상태 관리를 위한 방법으로, 컴포넌트 트리 안에서 데이터나 상태를 효율적으로 공유할 수 있게 해주는 기능이다.
마무리...
이번에는 기존에 알고 있던 Hook인 useState와 useEffect에 대해 정확히 알아보고, 그 외에 다른 Hook들에 대해서도 알아보았다. 몇 가지 Hook들은 사용해 보기도 했는데, 사실 Hook을 이해하는 것보다 Hook과 관련된 용어들을 찾아보고 정리하는 것이 더 힘들었던 것 같다.
