리액트의 props와 state

참고한 블로그...

https://studyingych.tistory.com/52

React Props, State 이해 및 사용법

 

https://kindjjee.tistory.com/102

props와 state의 차이점

 

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React

 

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

 

https://ljh86029926.gitbook.io/coding-apple-react/1/props-and-state

props & state | React

 

---

props와 state는 React에서 데이터를 사용할 때 다루는 데 사용됩니다.

Props

properties의 줄임말로, 컴포넌트가 외부에서 받는 데이터를 의미합니다.

즉, 부모 컴포넌트로부터 자식 컴포넌트에 전달되는 데이터입니다. (단방향)

 

읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다.

대신, 부모 컴포넌트에서 값을 변경하여 자식 컴포넌트가 새로운 값을 받게 됩니다.

 

props는 컴포넌트 간에 데이터를 전달하는데 사용됩니다.

 

State

컴포넌트 내부에서 관리되는 데이터를 의미합니다.

즉, 컴포넌트 자체가 가지고 있는 데이터입니다.

 

컴포넌트의 상태를 변경하거나 업데이트할 때 사용됩니다.

읽기와 쓰기 모두 가능하며, setState()함수를 통해 값이 변경됩니다.

일반적으로 사용자 입력 또는 네트워크 응답과 같은 이벤트에 응답하여 state를 업데이트 합니다.

 

오직 state가 생성된 컴포넌트 내에서만 변경이 가능합니다.

 

 

props가 자식 컴포넌트에서 변하지 않는 이유는 무엇인가요?

React가 컴포넌트 간 데이터를 단방향(Top-down)으로만 전달하도록 설계되었기 때문입니다

이 설계는 데이터 흐름을 예측 가능하고 일관성 있게 만들어, 상태 관리와 디버깅을 더 쉽게 해줍니다. 부모 컴포넌트에서 내려준 props는 자식 컴포넌트에서 읽기 전용으로 취급되며, 자식 컴포넌트는 props를 수정하는 대신 부모 컴포넌트와 상호작용하여 필요한 데이터를 변경하도록 합니다.

 

 

props 사용 방법

1. props 정의하기: 부모 컴포넌트에서 자식 컴포넌트로 전달할 데이터를 정의합니다.

function ParentComponent() {
  const data = { name: "John", age: 30 };
  return (
    <ChildComponent data={data} />
  );
}

 

2. props 받아오기: 자식 컴포넌트에서 props를 받아옵니다.

function ChildComponent(props) {
  // props.data를 이용하여 데이터를 사용합니다.
  return (
    <div>
      <p>Name: {props.data.name}</p>
      <p>Age: {props.data.age}</p>
    </div>
  );
}

 

 

props로 state를 전달하는 예시

import React, { useState } from "react";

function ParentComponent() {
  const [count, setCount] = useState(0);
  return (
    <ChildComponent count={count} setCount={setCount} /> // 부모 컴포넌트에서 props 정의하기
  );
}

function ChildComponent(props) {
  // props.count와 props.setCount를 이용하여 state를 사용합니다.
  return (
    <div>
      <p>Count: {props.count}</p> 
      <button onClick={() => props.setCount(props.count + 1)}>Increment</button>
      // 자식 컴포넌트에서 props 받아오기
    </div>
  );
}

 

 

핵심 내용

React에서 props와 state는 컴포넌트의 데이터를 관리하는 두 가지 주요 방식

 

- props

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위한 수단.

단방향(Top-down)으로 전달되며, 자식 컴포넌트에서는 읽기 전용으로만 사용 가능.

→ 데이터 흐름 예측 가능하게 만들고 컴포넌트 간의 의존성을 줄이는 데 도움.

 

- state

컴포넌트 내부에서 관리되는 데이터.

사용자의 입력, 네트워크 응답 등과 같은 동적인 데이터를 다룰 때 사용.

useState와 같은 훅을 통해 생성되며, 값을 변경할 때는 setState 또는 상태 업데이트 함수를 사용.

state가 변경되면 컴포넌트가 자동으로 리렌더링.

 

간단히 말해, props는 외부에서 전달받아 수정할 수 없는 데이터, state는 컴포넌트 내부에서 관리하며 수정 가능한 데이터라고 이해할 수 있습니다