[React 알고갈 개념] - state와 props의 차이를 알아보자

이번 장에서는

State와 Props의 개념과 차이점을 자세히 다뤄볼 예정입니다.

여러분은 React의 state에 얼만큼 알고 계신가요 ? 둘의 차이는 뭘까요 ?

 

결론부터 보자면,

state 컴포넌트의 상태를 나타내는 데이터

컴포넌트 내부에서 관리되는 동적인 데이터로, 변경이 가능하며 주로 UI의 동작을 제어합니다.

props 외부로부터 주어진 데이터

부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터로, 주로 컴포넌트 간 데이터 전달에 사용됩니다.

 

우리가 데이터 변경이 있는 웹 페이지를 만들고 싶다고 가정했을 때 state가 없었다면.

이를 위해서 페이지에 있는 데이터 부분이 변경되었을 때마다 DOM에 접근하여 직접 수정해 주었을 것입니다.

데이터가 변경된 만큼 당연히 화면도 변경되어야 하니까요

 

여기서 잠깐 !! 바인딩이란 개념을 짚고 넘어가자

바인딩이란?
"묶다"라는 사전적 의미로, 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화시키는 기법

우리가 바닐라 자바스크립트로 개발했을 때에는 여러 개의 객체와 화면에 데이터를 직접 일치시켜 주어야 했습니다.

하지만 React의 등장으로 React가 데이터 바인딩을 대신해 주기 때문에 수고를 덜게 되었습니다.

state의 역할

우리는 변경되는 데이터를 위해 React에서 지원하는 state를 사용합니다.

state를 사용하면 데이터 변경이 감지되면 자동으로 화면을 리렌더링 해줄 수 있습니다.

 

함수형 컴포넌트 setState에서 state의 생명주기

👉 함수형 컴포넌트에서는 React가 내부적으로 최적화합니다. useState와 useEffect로 상태와 렌더링 과정을 관리합니다 ☺️
     클래스형 컴포넌트에 리렌더링 여부를 결정하는데 필요한 shouldComponentUpdate를 더이상 사용하지 않아도 됩니다

생명주기 핵심 3단계

1. setState 호출: 상태(state) 변경

2. 렌더 트리거: React는 변경된 state를 감지하고, 컴포넌트 업데이트를 시작

3. 리렌더링: React는 가상돔(Virtual DOM)을 새롭게 생성하여 이전 가상돔과 비교

4. DOM 업데이트: 변경된 부분만 실제돔에 반영

 

React는 하향식 데이터 흐름

부모에서 자식으로 props를 전달

리액트는 하향식으로 데이터가 흐르므로 부모에서 자식으로 props를 보내는 형태를 갖습니다.

이때, 자식은 props가 누구로부터 어떤 방식으로 전달되는지 전혀 알 필요가 없습니다.
이 때문에 state를 종종 캡슐화라고 불립니다. state를 가진 컴포넌트 외에는 접근 불가능하기 때문입니다.

props가 폭포라면 state는 물의 근원이라 표현 [출처 - 우아한 테크]

 

state와 props의 차이

state는 state를 해당 컴포넌트에서 관리합니다.

state를 자식 컴포넌트에게 넘기면 props가 되고 읽기 전용이 됩니다.

* 리액트는 단방향 데이터 바인딩을 지원 - JavaScript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것

	state	props
데이터 소유권	컴포넌트 자체에서 관리	부모 컴포넌트에서 전달
변경 가능 여부	변경 가능 (setState, useState)	읽기 전용 (수정 불가)
수명	해당 컴포넌트 내에서만 존재	부모에서 자식으로 전달되는 데이터
용도	동적 데이터 관리	컴포넌트 간 데이터 전달
초기화 위치	컴포넌트 내부 (useState 또는 state)	부모 컴포넌트에서 설정

 

왜 굳이 setState를 사용해야하나 ?

결론부터 말하자면, state를 직접 변경했을 경우에는 새로운 state로 화면이 업데이트되지 않기 때문 !!

위에서 살펴본 React Life Cycle과 관련 있습니다.

 

setState의 함정

함정 코드

import React, { useState } from "react";

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

  const handleIncrement = () => {
    // 상태가 즉시 갱신되지 않으므로 count는 이전 값에 의존함
    setCount(count + 1);
    setCount(count + 1); // 의도는 2 증가시키는 것이지만 실제로는 1만 증가
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

이 코드에는 함정이 있습니다. 이 코드는 setCount를 2 증가시켰지만 실제로 count는 1만 증가 했습니다.

어랏 ?! 아까 setState로 상태값을 변경할 수 있다고 하지 않았나 🤔

이유는 setState는 비동기 함수이기 때문입니다. 컴포넌트가 리 렌더링 될 때까지 state를 갱신하지 않게 된 것입니다.

setState는 state를 변경하려는 즉각적인 명령이 아닌 요청입니다
단지 컴포넌트에게 갱신된 state값을 사용하기 위해 다시 렌더링 해야 한다고 알리는 역할일 뿐입니다

 

그렇다면 setCount를 2증가시키기 위해선 위 코드를 어떻게 변경 해야할까 ?

setCount((prevCount) => prevCount + 1); // prevCount는 0 → 1
setCount((prevCount) => prevCount + 1); // prevCount는 1 → 2 (결과: 2)

setCount에 콜백을 전달하면 이전 상태를 안전하게 참조할 수 있습니다.

위와 같이 수정하면 의도대로 count가 2씩 증가합니다.

왜 콜백을 전달해야 예상대로 동작하게 되는걸까? 두 방식의 흐름을 살펴보겠습니다.

 

1. 값을 직접 사용하는 방식

setCount(count + 1);

• 여기서 count는 현재 렌더링 시점의 상태값입니다.
• 상태 업데이트는 비동기로 동작하므로, setCount를 호출한 시점에 count의 값은 아직 변경되지 않았습니다.
• 동일한 렌더링 사이클 내에서 여러 번 setCount(count + 1)를 호출하면 이전 상태를 참조하는 것이 아니라 동일한 값(count)에 계속 +1을 수행합니다.

 

2. 콜백 함수를 사용하는 방식

setCount((prevCount) => prevCount + 1);

• 이 방식에서는 이전 상태값(prevCount)을 콜백 함수의 매개변수로 안전하게 참조합니다.
• React는 상태 업데이트가 요청된 순서대로 내부적으로 처리하므로, 이전 값에 의존하는 연산을 정확히 수행할 수 있습니다.
• 따라서 동일한 렌더링 사이클 내에서 여러 번 호출해도 순차적으로 상태가 업데이트됩니다.

특징	값 사용 (count + 1)	콜백 사용 ((prevCount) => prevCount + 1)
업데이트 기준	현재 렌더링 시점의 상태값	최신 상태값 (업데이트 순서대로 참조)
React의 역할	여러 setState 호출을 병합하여 한 번의 렌더링 수행	각 콜백을 순서대로 실행하면서 중간 상태를 반영
사용 사례	독립적인 상태 갱신	이전 상태에 의존하는 상태 변경
결과	상태가 의도보다 적게 또는 잘못 업데이트됨	상태가 정확히 반영됨

 

왜 ? 굳이 setState는 비동기적으로 동작하는 걸까

바로 결론을 말하자면, 연속적으로 state를 변경하고 변경 횟수만큼 리렌더링을 진행한다면 성능 저하를 일으키기 때문입니다.

예시

이렇게 특정 이벤트가 발생했을 때 부모, 자식 컴포넌트 둘 다 setStat를 실행한다고 가정할 경우

자식 컴포넌트는 setState를 실행하자마자 리렌더링 됩니다.

부모 컴포넌트도 setState를 실행하자마자 리렌더링 되지만 부모에 의해 자식은 불필요한 렌더링을 한번 . 하게 됩니다.

이는 n번의 변경만큼 n개의 렌더링이 되기 때문에 성능 저하가 발생하는 것입니다.

 

따라서

setState의 실행을 지연시키고 여러 컴포넌트를 한 번에 갱신하는 것을 배치 처리라고 부릅니다.

 

비교

위에서 작성한 값사용 시 예상대로 동작하지 않는 부분을 배치처리와 연관지어보겠습니다.

배치 처리의 개념

배치 처리란 ?
데이터를 실시간으로 처리하지 않고 종합하여 처리하는 것
React가 성능을 최적화하기 위해 동일 렌더링 사이클에서 여러 상태 업데이트를 병합하여 한 번의 렌더링만 수행하는 개념입니다.

1. `setCount(count + 1)` 호출
2. `setCount(count + 1)` 호출
-----------------------------------
   [ React Batch Queue ]
   | count + 1          |
   | count + 1          |
-----------------------------------
→ 병합 처리: count는 0 → 1
→ 렌더링 1회 수행 (결과: count = 1)

React의 배치 처리(batch processing)

React는 성능 최적화를 위해 동일한 이벤트 핸들러 내에서 여러 setState 호출을 병합하여 하나의 렌더링 작업으로 처리합니다.

• setCount(count + 1)을 두 번 호출하면, React는 현재 렌더링 시점의 count 값(예: 0)을 기준으로 각각의 setState를 처리합니다.
• 두 호출 모두 동일한 값(0)을 기반으로 업데이트하므로 최종적으로 상태는 1만 증가합니다.

 

작동 과정

1. setCount(count + 1) 호출 → React가 이 업데이트를 큐에 추가
2. setCount(count + 1) 호출 → React가 이 업데이트를 큐에 추가
3. React가 배치 처리하면서, 마지막 상태 업데이트만 반영 → 최종 상태는 1

 

왜 마지막 호출만 유효한가?

React는 동일한 렌더링 사이클에서 setState 호출을 병합합니다. 따라서 현재 count 값을 기준으로 계산된 결과가 덮어씌워지며, 이전 호출의 중간 상태는 반영되지 않습니다.

 

2. 콜백 사용 (이벤트 루프와 관련)

1. `setCount((prevCount) => prevCount + 1)` 호출
2. `setCount((prevCount) => prevCount + 1)` 호출
-----------------------------------
   [ React Update Queue ]
   | prevCount + 1       | (prevCount = 0 → 1)
   | prevCount + 1       | (prevCount = 1 → 2)
-----------------------------------
→ 각 콜백 실행 순서대로 처리
→ 렌더링 1회 수행 (결과: count = 2)

콜백과 이벤트 루프

콜백 형태의 setCount는 React가 상태를 처리하는 순서를 정확히 보장합니다. 각 콜백은 이전 상태 값을 참조하여 순차적으로 업데이트되므로, 모든 호출이 의도한 대로 반영됩니다.

 

작동 과정

1. setCount((prevCount) => prevCount + 1) 호출 → React가 콜백을 큐에 추가.
2. setCount((prevCount) => prevCount + 1) 호출 → React가 두 번째 콜백을 큐에 추가.
3. React는 콜백을 큐에서 순차적으로 처리
   • 첫 번째 콜백: prevCount는 0 → 상태 업데이트 후 count는 1.
   • 두 번째 콜백: prevCount는 1 → 상태 업데이트 후 count는 2.

 

느낀점

React의 상태 관리 방식은 간결하면서도 효율적이라는 것을 느꼈습니다. 특히 setState의 비동기적 동작이 성능 최적화에 크게 기여하며, 배치 처리라는 개념을 도입한 점도 자세히 알게되었습니다.

 

setCount(count + 1)과 같은 단순한 호출이 예상과 다르게 동작할 수 있다는 점을 React의 기본 원리를 포스팅 해보고 이제서야 상태관리의 개념을 제대로 이해하고 사용할 수 있을 것 같습니다. 콜백을 사용하여 React의 업데이트 순서를 이벤트 루프와 콜백 큐의 동작으로 연관지어 생각해보니 더 이해가 잘 되었습니다.

 

React의 설계에서 복잡한 상태 관리와 UI 업데이트를 간단하게 만들려는 의도가 잘보였습니다.

 

참고 영상 - 우아한 테크