react의 props와 state

안녕하세요. 웹 한수정입니다 !

 

react 프로젝트를 시작하면 가장 먼저 마주하게 되는 코드 중 하나가 바로 const [state, setState] = useState()일 텐데요.
이처럼 컴포넌트에서 데이터를 다루는 대표적인 방식으로는 state와 props가 있습니다.

 

두 개념은 비슷해 보이지만 실제로는 쓰임새와 역할이 뚜렷이 다릅니다.
이번 글에서는 state와 함께 자주 언급되는 props에 대해 더 깊이 들여다보고, 각각이 어떤 방식으로 컴포넌트의 동작에 영향을 주는지 정리해보려고 합니다.

 

 

리액트 컴포넌트와 순수 함수 

 

React 컴포넌트는 일반적으로 순수 함수처럼 동작합니다.
입력(props)에 따라 동일한 출력을 반환하며, 내부에서 부수효과(side-effect)를 일으키지 않습니다.

 

순수함수에 대해 자세히 알고 싶다면 아래 글을 참고해주세요.

https://ko.react.dev/learn/keeping-components-pure

 

function Recipe({ drinkers }) {
  return (
    <ol>
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
    </ol>
  );
}

 

위 코드에서 Recipe 컴포넌트는 props인 drinkers을 받아서 결과를 출력할 뿐입니다. 상태가 없고, 외부에 영향을 주지도 않습니다. 이처럼 props는 컴포넌트를 구성하는 기본 입력값의 역할을 합니다.

 

 

---

 

Props

props는 properties의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 컴포넌트 간 재사용성과 구조화를 가능하게 합니다. 

 

• 부모에서 자식에게 전달되는 단방향 데이터 흐름을 가지고 있고 객체 형태로 전달됩니다.
• 또한 이렇게 전달된 props는 자식 컴포넌트에 의해 수정될 수 없습니다. 

 

function Hi({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

<Hi name="수정" />

 

이처럼 Hi 컴포넌트는 props.name을 받아 사용자 이름을 화면에 출력합니다.
다른 이름을 전달하면 다른 결과가 출력되기 때문에 재사용성이 높습니다.

 

하지만, props는 읽기 전용, immutable 데이터 이기 때문에 자식 컴포넌트에 의해선 변경될 수 없습니다. 

props값을 전달 받았을 때 예측 가능한 동작을 보장해주기 위해, 자식 컴포넌트에 의해 변경 될 수 없도록 props는 불변성이 보장됩니다. 

 

 

---

 

State

 

state는 컴포넌트 내부에서 선언하고 관리하는 값인 상태를 의미합니다. 사용자의 상호작용에 따라 값이 바뀌고 해당 값이 바뀌면 react는 ui를 리렌더링합니다. 

 

state는 컴포넌트가 관리하고 값이 바뀌면 컴포넌트가 다시 렌더링됩니다. react 프로젝트를 처음 시작했을때, App 컴포넌트의 state와 같이 useState 훅을 통해 선언합니다.

 

 

먼저, state를 사용하지 않고 상태를 직접 변수로만 선언한 경우입니다.

 

아래 코드는 카운트 + 1 버튼을 눌러도 콘솔에만 보일 뿐, 화면에 반영이 되지 않습니다.

따라서, 상태를 관리하는 목적을 달성하지 못하는 코드입니다. 

const App = () => {
  let count = 0;
  const handleClick = () => {
    count = count +1
    console.log(count)
  }

  return (
    <div>
      <h2>현재 Count 수: {count}</h2>
      <button onClick={handleClick}>카운트 + 1</button>
    </div>
  );
}

export default App;

 

 

다음은 state를 사용하는, useState를 사용한 경우입니다. 

 

아래 코드는 setCount를 호출해 react가 상태 변화를 감지하고 리렌더링해, 변경된 상태가 ui에 반영이 되는 함수형 컴포넌트입니다. 

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <>
      <p>현재 Count 수: {count}</p>
      <button onClick={handleClick}>카운트 + 1</button>
    </>
  );
}

 

 

우린 함수형 컴포넌트를 주로 보는데, 클래스형 컴포넌트도 존재합니다.

저도 클래스형 컴포넌트에는 익숙하지 않아 글을 쓰며, 위 함수형 컴포넌트와 동일한 기능을 하는 클래스형 컴포넌트를 작성해보겠습니다.

 

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <>
        <p>현재 Count 수: {this.state.count}</p>
        <button onClick={this.handleClick}>카운트 + 1</button>
      </>
    );
  }
}

 

 

useState는 react hook이고 hooks는 함수형 컴포넌트에서 작동한다고 합니다. 따라서 클래스형 컴포넌트에서는 this.state와 this.setState를 사용해야 합니다. 

 

 

props와 state

부모에서 자식으로 props를 전달하고, 자식에서 state로 관리하는 방식을 간단히 알아보겠습니다.

 

아래는 부모컴포넌트에서 전달받은 props로 자식 컴포넌트에서 state를 초기화합니다.

function Parent() {
  const [name, setName] = useState("화사");

  return <Child name={name} />;
}

function Child({ name }) {
  const [nickname, setNickname] = useState(name); // props로 받은 name을 state의 초기값으로 사용

  return (
    <div>
      <p>이름: {nickname}</p>
      <button onClick={() => setNickname("밤식이")}>이름 변경</button>
    </div>
  );
}

 

 

끝으로 정리하고 마무리하겠습니다. 

 

state와 props에 차이에 대해 정리하면,

	props	state
정의	부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터	컴포넌트 내부에서 선언하고 사용하는 변경 가능한 상태값
데이터 흐름	부모에서 자식으로 단방향	내부에서 생성 및 변경 가능
수정 가능 여부	자식 컴포넌트에서 수정 불가	setState 함수를 통해 수정 가능
사용 목적	컴포넌트 간 데이터 전달 및 재사용	컴포넌트 내부에서 동적인 UI 렌더링 제어
선언 위치	외부	내부

 

 

state를 직접 변경하지 않고 setState를 사용하는 이유는,

 

React에서는 단순히 변수 값을 바꾸는 것이 아니라, UI와 상태가 일치하도록 유지하는 역할이 중요합니다. 그래서 아래 이유로 setState 또는 setCount 같은 업데이트 함수를 사용해야 합니다.

 

1. 🔁 리렌더링을 자동으로 트리거하기 위해

• setState를 호출해야 react가 상태 변화를 인식하고, 그에 따라 컴포넌트를 자동으로 리렌더링합니다.
• 직접 값을 바꾸면 react는 변경 사실을 몰라 ui가 바뀌지 않습니다.

2. 🧠 React의 상태 업데이트 흐름을 따르기 위해

• React는 상태를 일종의 큐(queue)에 넣어서 비동기적으로 처리합니다.
• setState는 이런 내부 메커니즘을 고려해서 업데이트 순서 및 병합 처리 등을 안정적으로 수행합니다.
• 직접 변경하면 이 흐름을 깨고, 예기치 않은 버그가 발생할 수 있습니다.

3. 🧼 불변성 유지

• setState는 새로운 상태 객체를 생성함으로써 이전 상태와의 불변성을 유지합니다.

 

 

너무너무 바빠서...... 깊고 많은 내용을 담지 못했습니다 ........... 그래도 읽어주신 모두를 사랑합니다 ~...