[공부하면서 쓰는] props와 state

1. 개요 

전 글에서 리액트의 기본 개념인 props와 state를 잠깐 설명했었는데, 이 글에서는 props와 state의 각각 개념과 차이점에 대해 자세히 다루도록 하겠습니다. 

 

✅ 목차 

- props
- state
- props와 state의 차이 

 

 

2. props 

props란 부모 컴포넌트에서 자식 컴포넌트에  데이터를 전달하는 방식입니다. 

import React from "react";

function Meeting(props) {
  return <h1>Hello,{props.name} </h1>
} 

function App() {
  return (
    <div>
      <Meeting name="Alice"/>
      <Meeting name="Tim"/>
      <Meeting name="Charlie"/>
    </div>
  );
}

 

 

✅ 특징 

 

-  읽기 전용으로 사용되며 자식 컴포넌트는 전달받은 props를 수정할 수 없고, 해당 데이터를 사용만 가능합니다. 

   애플리케이션의 데이터 흐름이 일방적으로 유지됩니다. 

-  데이터 전달수단 : 부모 컴포넌트가 자식 컴포넌트에 값을 전달하기 위한 방법으로 사용됩니다. 

-  함수 전달 가능 : 함수 또한 props를 통해 전달할 수 있습니다. 

 

 

3. state 

 

state는 컴포넌트 내부에서 관리되는 동적인 데이터로 컴포넌트가 렌더링되고 있을 때 동적으로 변경될 수 있으며 

변경에 따라 UI가 다시 렌더링됩니다. 

 

✅ 특징 

- 사용자의 입력, 서버에서 가져온 데이터 등과 같이 변할 수 있는 데이터를 관리합니다. 

-  state는 setState(클래스형 컴포넌트) 또는 useState(함수형 컴포넌트)를 통해 언제든지 변경될 수

있습니다.

- 상태가 변경되면 React는 그 즉시 UI를 업데이트하지 않고, 효율적인 렌더링을 위해 비동기적으로 업데이트를

처리합니다.

- 로컬 데이터 관리: state는 해당 컴포넌트 내부에서만 관리되며, 다른 컴포넌트는 이 상태에 접근할 수 없습니다. 다만, props를 통해 상위 컴포넌트로 데이터를 전달하거나, 상태 변경을 트리거하는 함수를 전달할 수 있습니다.

- 컴포넌트 내부에서만 사용이 가능하며 다른 컴포넌트로 직접 전달되지 않습니다. 

 

import { useState } from "react";

function Counter() {
  const [count,setCount] = useState(0);
  return (
    <div>
      <p>현재 카운트 : {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

 

 

 

4. props와 state의 차이 정리 

특징	props	state
데이터 소스	부모 컴포넌트에서 전달	컴포넌트 내부에서 생성됨
수정 가능성	읽기 전용(수정 불가)	수정 가능(useState 사용)
사용 용도	컴포넌트 간의 데이터 전달	컴포넌트 내부에서 동적인 데이터 관리
데이터 흐름	상위 > 하위 (한 방향 데이터 흐름)	컴포넌트 내부에서만 관리 , 필요시 상위에 상태 전달 가능함
리렌더링	props가 변경되면 자식 컴포넌트가 다시 렌더링됨	state가 변경되면 해당 컴포넌트가 다시 렌더링됨

 

 

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며  ,state는 내부에서 동적 데이터를

전달하는 차이가 있습니다.