React Native에서 props와 state는 어떻게 동작하나요?

Question

Accepted Answer

**Props**와 **state**는 React Native에서 동일하게 동작하는 핵심 React 개념입니다. **props**는 component에 데이터를 전달하고(읽기 전용 입력), **state**는 시간에 따라 변할 수 있는 데이터를 담아 다시 렌더링을 유발합니다. 이들을 이해하는 것은 기본입니다. ## Props — 전달되는 데이터 (읽기 전용) ```jsx // props는 (부모로부터) component에 전달되는 입력 — 읽기 전용 function UserCard({ name, age }) { // props를 받음 return {name}, {age}; } // component 사용 시 props 전달 // → props는 아래로 흐름 (부모 → 자식); component는 자신의 props를 변경하지 않음 ``` ## State — 변하는 데이터 (useState를 통해) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // state + setter 선언 return ( setCount(count + 1)}> {count} {/* state 사용 */} ); } // → setCount 호출 → state 갱신 → component가 새 값으로 RE-RENDER됨 ``` State는 내부적이고 변경 가능한 데이터로, (`useState`의 setter를 통해) 갱신하면 다시 렌더링을 유발합니다 — UI가 변화를 반영하는 방식입니다. ## props vs state ```text PROPS → 부모로부터 전달됨; 읽기 전용 (component가 변경하지 않음); 외부로부터의 설정/데이터용 STATE → component 내부적; 변경 가능 (setState/useState를 통해); 다시 렌더링 유발; 시간에 따라 변하는 데이터용 (사용자 입력, 토글, 가져온 데이터) → 데이터는 props를 통해 아래로 흐르고, state 변경이 UI 업데이트를 구동함. (웹용 React와 동일.) ``` ## 왜 중요한가 props와 state를 이해하는 것은 React Native의 기본인데, 이들은 **컴포넌트가 동작하고 UI가 업데이트되는 방식의 중심에 있는 핵심 React 개념**이므로 반드시 알아야 합니다. **Props**(부모로부터 component에 전달되어 컴포넌트 트리를 따라 아래로 흐르는 읽기 전용 데이터)는 component가 외부로부터 설정과 데이터를 받는 방식으로, 재사용 가능하고 조합 가능한 컴포넌트를 만들게 합니다. **State**(`useState` hook으로 관리되며 갱신하면 다시 렌더링을 유발하는 내부적이고 변경 가능한 데이터)는 component가 시간에 따라 변하는 데이터(사용자 입력, 토글, 가져온 데이터)를 담고 반응하는 방식이자 UI가 변화를 반영하는 메커니즘입니다. **구분** — props는 전달되어 읽기 전용(외부 데이터/설정용)인 반면 state는 내부적이고 변경 가능(변하는 데이터용으로 다시 렌더링 구동) — 과 **데이터는 props를 통해 아래로 흐르고 state 변경이 UI 업데이트를 구동한다는** 원칙을 이해하는 것은 React Native(및 React) 앱을 올바르게 만드는 데 기본입니다. 이들은 웹용 React와 정확히 같은 개념이므로 이해가 그대로 전이되며, React Native 컴포넌트를 만드는 누구에게나 필수입니다. props와 state를 올바르게 다루는 것(props로 데이터 전달, state로 변하는 데이터 관리, 단방향 데이터 흐름 이해)은 기능하고 올바른 컴포넌트의 핵심입니다. props와 state는 React Native(및 React) 컴포넌트가 데이터를 받고(props) 변화를 관리하여(state) UI 업데이트를 구동하는 방식의 중심에 있고, 이들을 이해하는 것이 어떤 React Native 앱이든 올바르게 만드는 데 기본이므로, props와 state를 이해하는 것은 필수 기초 지식입니다. 이는 모든 React Native 개발자가 이해해야 할 핵심 개념이고, 웹 React와 동일하며(따라서 지식이 전이됨), 데이터를 받고 변화에 반응하는 컴포넌트를 만드는 데 기본적인 React Native UI 개발의 기본 작동 원리입니다.