모바일 개발 · 기초
React Native 컴포넌트에서 `state`와 `props`는 각각 어떤 역할을 하며, 이 둘의 주요 차이점은 무엇인가요?
힌트 · `props`는 부모로부터 전달받는 읽기 전용 데이터이며, `state`는 컴포넌트 내부에서 관리되는 변경 가능한 데이터입니다.
상태 관리불변성단방향 데이터 흐름컴포넌트 내부읽기 전용
모범답안
React Native 컴포넌트에서 state와 props는 모두 데이터를 다루는 중요한 역할을 합니다.
props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. 중요한 점은 props는 자식 컴포넌트 내부에서 변경할 수 없는 읽기 전용 데이터라는 것입니다. 부모 컴포넌트가 props를 변경해야 자식 컴포넌트가 업데이트됩니다.
반면 state는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트 스스로 setState 메서드를 사용하여 state를 변경할 수 있으며, state가 변경되면 컴포넌트가 다시 렌더링됩니다.
주요 차이점은 props는 외부로부터 전달받아 변경할 수 없는 데이터이고, state는 컴포넌트 내부에서 관리하며 변경 가능한 데이터라는 점입니다. React의 단방향 데이터 흐름을 이해하는 데 중요한 개념입니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 React Native 면접 질문
- React Native에서 가장 기본적인 컴포넌트인 `View`와 `Text`의 역할은 무엇이며, 각각 어떤 용도로 사용되는지 설명해주세요.
- React Native에서 UI 컴포넌트에 스타일을 적용하는 일반적인 방법 중 `StyleSheet.create`를 사용하는 이유는 무엇인가요?
- React Native에서 레이아웃을 구성할 때 Flexbox를 활용하는 방법과 주요 속성 (예: `flexDirection`, `justifyContent`, `alignItems`)에 대해 설명해주세요.
- React Native 함수형 컴포넌트에서 `useEffect` Hook은 주로 어떤 목적으로 사용되며, 의존성 배열의 역할에 대해 설명해주세요.
- React Native 컴포넌트에서 `useEffect` 훅의 의존성 배열(dependency array)과 클린업(cleanup) 함수를 사용하여 발생할 수 있는 일반적인 메모리 누수나 불필요한 재실행 문제를 어떻게 방지할 수 있나요?
- React Navigation 라이브러리에서 `Stack Navigator`와 `Tab Navigator`의 주요 차이점은 무엇이며, 각각 어떤 사용자 경험을 제공할 때 더 적합하다고 생각하시나요?