Hook

[Largopie]

기본 개념 질문

• React Hook이란 무엇이며, 어떤 문제를 해결하기 위해 도입되었나요?
• 클래스 컴포넌트와 비교했을 때 Hook의 장점은 무엇인가요?
• Hook의 기본 규칙(Rules of Hooks)에 대해 설명해주세요.

주요 Hook 관련 질문

• useState Hook의 동작 방식과 사용 사례에 대해 설명해주세요.
• useEffect Hook의 목적과 생명주기 메서드와의 관계를 설명해주세요.
• useContext Hook에 대해서 설명해주시고, 사용한 경험이 있다면 어떠한 경험이었는지 간단하게 소개해주세요.

성능 최적화 관련 Hook 질문

• useMemo와 useCallback의 차이점과 각각의 사용 사례를 설명해주세요.
• React.memo와 useMemo의 차이점은 무엇인가요?
• useRef Hook의 용도와 장점에 대해 설명해주세요.

Custom Hook 관련 질문

• Custom Hook을 사용한 사례와 함께 Custom Hook이 필요한 이유에 대해서 설명해주세요.

상태 관리 관련 Hook 질문

• useReducer Hook의 사용 방법과 useState와의 차이점을 설명해주세요.
• Context API가 존재하는데도 불구하고 상태관리 라이브러리를 사용하는 이유는 무엇일까요?

비동기 처리 관련 Hook 질문

• useEffect에서 비동기 작업을 처리하는 방법에 대해 설명해주세요.
• React Query나 SWR과 같은 데이터 페칭 라이브러리의 Hook 사용 경험이 있다면 공유해주세요.

테스팅 관련 질문

• Hook을 사용한 컴포넌트를 테스트하는 방법에 대해 설명해주세요.
• Custom Hook에 대한 단위 테스트를 진행한 경험이 있다면 공유해주세요.

Hook의 내부 동작 관련 질문

• Hook의 내부 동작 원리에 대해 설명해주세요.
• 클로저(Closure)가 Hook의 동작에 어떤 역할을 하는지 설명해주세요.

React 19버전에 관련된 내용

• 19버전에 추가되는 Hook을 알고 있는지 궁금하고, 알고 있다면 소개부탁드립니다.

[Largopie]

기본 개념 질문

React Hook이란 무엇이며, 어떤 문제를 해결하기 위해 도입되었나요?

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수입니다.
React Hook은 다음과 같은 문제를 해결하기 위해 도입되었습니다.

• 클래스형 컴포넌트는 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다. render props나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결했지만, 이는 코드의 추적을 어렵게 만들었습니다.
• 복잡한 컴포넌트들은 이해하기 어렵습니다. 각 생명주기 메서드에서는 관련 없는 로직들이 섞여 들어가는 문제가 있었습니다.
• Class는 사람과 기계를 혼동시킵니다. 보통의 다른 언어와 다르게 동작하는 this 키워드가 사용자에게 큰 혼란을 주었으며, 코드의 재사용과 구성을 매우 어렵게 만들었습니다.

위와 같은 문제를 해결하기 위해 Class 없이 React 기능을 사용하는 방법을 제시했습니다.

https://ko.legacy.reactjs.org/docs/hooks-intro.html#motivation

클래스 컴포넌트와 비교했을 때 Hook의 장점은 무엇인가요?

• 생명주기 메서드 대신 useEffect를 사용하여 관련 로직을 함께 그룹화할 수 있습니다.
• 커스텀 Hook을 통해 상태 관련 로직을 쉽게 추출하고 재사용할 수 있습니다.
• 함수형 컴포넌트에서는 this를 사용하지 않아 혼란을 줄일 수 있습니다.

Hook의 기본 규칙(Rules of Hooks)에 대해 설명해주세요.

• 최상위(at the top level)에서만 hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 hook을 실행할 수 없습니다.
• React 컴포넌트 내에서만 hook을 호출해야 합니다. 일반 JavaScript 함수에서는 hook을 호출해서는 안되며, customHook에서는 hook을 호출할 수 있습니다.

[Largopie]

주요 Hook 관련 질문

useState Hook의 동작 방식과 사용 사례에 대해 설명해주세요.

useState는 상태를 관리하는 hook입니다. 구조분해할당으로 state와 setState를 반환받는데, setState를 통해 state를 업데이트할 수 있으며, state로 상태를 나타낼 수 있습니다.

대표적인 사용 사례로는 input의 value에 state를 사용하여 값을 나타내고 onChange 변수에 setState를 사용하여 값을 업데이트할 때 사용합니다.

useEffect Hook의 목적과 생명주기 메서드와의 관계를 설명해주세요.

useEffect Hook은 데이터 fetching과 같은 컴포넌트 렌더링 주요 로직 외의 부수효과를 처리하기 위해 사용됩니다.

ComponentDidMouont, ComponentDidUpdate, ComponentWillUnmount
클래스형 컴포넌트에서 사용되던 위와 같은 메서드를 useEffect 훅 내에서 구현할 수 있습니다.
deps를 통해 상태가 업데이트될 때 내부 로직을 동작시킬 수 있으며, return 함수 내 로직으로 componentWillUnmount가 구현됩니다. 또한 deps를 빈 배열로 두거나, 초기 로딩 시 useEffect 에 선언한 내부 로직이 동작하게 됩니다.

useContext Hook에 대해서 설명해주시고, 사용한 경험이 있다면 어떠한 경험이었는지 간단하게 소개해주세요.

useContext Hook은 React의 Context API를 함수형 컴포넌트에서 쉽게 사용할 수 있게 해주는 Hook입니다.

에러가 발생했을 때 에러 Toast를 띄워주는 로직을 useContext를 사용해서 구현했습니다.
미리 만들어둔 Context를 전역적으로 사용할 수 있었습니다.

이외에도 테마(다크, 라이트 모드) 적용, 언어 또는 지역 데이터를 전달하는데 사용되기도 합니다.