모바일 개발 · 기초
React Native 함수형 컴포넌트에서 `useEffect` Hook은 주로 어떤 목적으로 사용되며, 의존성 배열의 역할에 대해 설명해주세요.
힌트 · 컴포넌트 렌더링 후 부수 효과(데이터 fetching, 구독 등)를 처리하며, 의존성 배열로 실행 시점을 제어합니다.
사이드 이펙트렌더링의존성 배열생명주기최적화
모범답안
useEffect Hook은 React Native 함수형 컴포넌트에서 주로 사이드 이펙트, 즉 부수 효과를 처리하기 위해 사용됩니다. 컴포넌트가 렌더링된 후에 특정 작업을 수행해야 할 때 유용합니다. 예를 들어, API로부터 데이터를 가져오거나, 외부 라이브러리를 초기화하거나, 구독을 설정하는 등의 작업이 있습니다.
의존성 배열은 useEffect가 언제 다시 실행되어야 하는지를 결정하는 중요한 역할을 합니다. 배열 내에 명시된 값들이 이전 렌더링과 비교하여 변경되었을 때만 useEffect 내부의 함수가 실행됩니다. 빈 배열 []을 전달하면 컴포넌트가 처음 마운트될 때 단 한 번만 실행되고, 배열을 생략하면 매 렌더링마다 실행됩니다. 적절한 의존성 배열을 사용하면 불필요한 업데이트를 방지하여 성능을 최적화할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 React Native 면접 질문
- React Native에서 UI 컴포넌트에 스타일을 적용하는 일반적인 방법 중 `StyleSheet.create`를 사용하는 이유는 무엇인가요?
- React Native에서 레이아웃을 구성할 때 Flexbox를 활용하는 방법과 주요 속성 (예: `flexDirection`, `justifyContent`, `alignItems`)에 대해 설명해주세요.
- React Native 컴포넌트에서 `state`와 `props`는 각각 어떤 역할을 하며, 이 둘의 주요 차이점은 무엇인가요?
- React Native 컴포넌트에서 `useEffect` 훅의 의존성 배열(dependency array)과 클린업(cleanup) 함수를 사용하여 발생할 수 있는 일반적인 메모리 누수나 불필요한 재실행 문제를 어떻게 방지할 수 있나요?
- React Navigation 라이브러리에서 `Stack Navigator`와 `Tab Navigator`의 주요 차이점은 무엇이며, 각각 어떤 사용자 경험을 제공할 때 더 적합하다고 생각하시나요?
- React Native 애플리케이션에서 `Context API`와 `Redux` (또는 MobX와 같은 전역 상태 관리 라이브러리)의 차이점을 설명하고, 각각 어떤 상황에 더 적합하다고 판단하시나요?