리액트의 핵심 개념: 컴포넌트, 상태, 그리고 props

jinew·2025년 1월 20일

React TIL

🥝 React

목록 보기

1/5

확실히 바닐라 자바스크립트 프로젝트를 해보니 리액트의 매력이 더 강하게 느껴지고 필요성이 절실해진다 😅 오늘부터 리액트 기초 다지기 훈련을 시작합니다 !

1. Component (컴포넌트)

: 컴포넌트는 리액트의 가장 기본적인 단위다. 이 컴포넌트를 이해하려면 리액트가 SPA(Single Page Application)라는 점을 이해하는 것이 도움이 될 것 같으니, 이 부분부터 짚고 넘어가자!

📃 SPA(Single Page Application)란?

: SPA는 하나의 HTML 페이지에서 모든 웹 애플리케이션을 처리하는 방식이다. 기존 웹 애플리케이션은 각 페이지마다 페이지명.html을 생성해 페이지를 이동하고, 서버에서 받아올 때마다 전체 페이지를 새로고침하는 방식으로 작동했다(MPA). 하지만 SPA는 한 번 로드된 후에는 페이지를 새로고침하지 않고 필요한 부분만 동적으로 업데이트하는 방식이다.
쉽게 말하면 페이지를 index.html 하나만 만들어놓고 그 안에 내용물을 여러 가지 레고를 바꿔 끼워가며 보여주는 거다.

SPA의 특징

페이지 새로고침 없음 : 사용자가 다른 페이지로 이동할 때마다 전체 페이지를 다시 로드하는 것이 아닌, 필요한 부분만 업데이트
빠른 반응성 : 페이지 전환 시 새로운 HTML을 요청하지 않기 때문에 빠른 반응 속도를 보여줌
URL 변경 : URL은 바뀌지만, 페이지 전체를 새로고침하지 않고, 해당 URL에 맞는 콘텐츠만 변경

리액트와 SPA

: 리액트는 SPA를 쉽게 만들 수 있게 해주는 라이브러리다. 리액트 애플리케이션은 하나의 HTML 페이지를 로드한 후, 그 안에서 컴포넌트들이 상태에 따라 동적으로 업데이트된다. 리액트는 UI를 여러 개의 컴포넌트로 나누어 관리하고, 상태가 변할 때마다 필요한 컴포넌트만 다시 렌더링하여 효율적으로 UI를 업데이트한다.

이렇게 페이지 전환 없이 필요한 콘텐츠만 업데이트되기 때문에, 리액트에서는 각각의 UI 요소를 컴포넌트로 나누어 관리한다. 예를 들어 리액트 애플리케이션에서 홈페이지를 구현한다고 하면, 페이지 전체를 하나의 컴포넌트로 만들지 않고, 헤더, 본문, 사이드바, 푸터와 같은 작은 컴포넌트들로 나누어 관리하는 거다. 이 컴포넌트들은 페이지 내 상태 변화에 따라 독립적으로 업데이트 된다.

이렇게 컴포넌트는 마치 레고 블록과도 같다. 우리가 레고를 조립할 때 여러 개의 작은 블록을 조합해 하나의 큰 구조물을 만드는 것처럼 이 작은 블록들이 바로 컴포넌트다. 헤더, 본문, 사이드바, 푸터 등을 나누어 관리하는 것도 마치 레고로 집을 만들 때 벽, 창문, 문, 지붕 등의 부분을 다른 블록으로 만드는 것과 마찬가지다.

function Header() {
  return <h1>Welcome to My Website</h1>;
}

function Footer() {
  return <footer>© 2025 My Website</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

위 스니펫에서 Header와 Footer는 각각 독립적인 함수형 컴포넌트다. 이 컴포넌트들을 합쳐서 하나의 큰 UI를 만든다고 볼 수 있다.

2. State (상태)

: State는 컴포넌트 내에서 변할 수 있는 데이터로, 컴포넌트의 기분과 비슷하다. 예를 들어서 사람이 기분이 좋아지거나 나빠지면 그에 따라 행동이 달라지듯이 (사실 이러면 안되긴 함) 컴포넌트도 상태에 따라 화면에 표시되는 내용이 달라진다.

State는 시간이 지나면서 변할 수 있고, 이 변화를 반영해 UI를 업데이트한다. State를 변경하면 리액트가 자동으로 화면을 리렌더링해 최신 상태를 반영한다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 변수 count

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

여기서 count는 state(상태)다. 버튼을 클릭할 때마다 setCount를 호출해 상태값을 변경하고, 리액트는 그 변경된 상태를 반영해 화면을 업데이트한다. 마치 사람이 기분에 따라 다른 행동을 하는 것처럼 😅 컴포넌트도 상태에 따라 화면을 다르게 렌더링한다.

3. Props

: props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터다. 쉽게 이해하면 구전설화 같은 느낌이다. 조상이 후손에게 이야기를 전하는 형태로 지식이나 정보를 전달하지만, 자식은 그 이야기를 그대로 전달받기만 하고 수정하지 않는다. 이를 다른 사람에게 전해주는 역할만 할 뿐이다.
이처럼 props는 1) 부모 컴포넌트가 자식 컴포넌트에 전달할 수 있고 2) 자식 컴포넌트는 이 데이터를 변경할 수 없이 그대로 사용하거나, 하위 자식에게 전달할 수만 있다. 즉, '읽기 전용 데이터'이다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

App 컴포넌트는 Greeting 컴포넌트에 name이란 prop을 전달한다. Greeting 컴포넌트는 이를 전달받아 "Hello, John!"이라고 출력한다. 부모가 구전설화의 주인공 이름을 알려주고 자식이 그 이름을 듣고 "안녕하세요 존아저씨" 라고 한 것과 비슷하다.

4. Component, State 그리고 Props

: 이 세 가지 개념은 아주아주 밀접하게 연결되어 있다. Component는 UI를 구성하는 기본 단위이고, State는 그 UI가 어떻게 변할지를 결정한다. 그리고 Props는 부모에서 자식으로 데이터를 전달하는 역할을 한다. 이 세 가지 개념이 합쳐져 리액트 애플리케이션을 구성하게 된다.

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

  return (
    <div>
      <Header title="My Counter App" />
      <Counter count={count} setCount={setCount} />
    </div>
  );
}

function Header(props) {
  return <h1>{props.title}</h1>;
}

function Counter(props) {
  return (
    <div>
      <p>Count: {props.count}</p>
      <button onClick={() => props.setCount(props.count + 1)}>Increment</button>
    </div>
  );
}

위 예시에서 App 컴포넌트는 Header와 Counter 컴포넌트를 사용한다.
App은 count와 setCount를 Counter 컴포넌트에 props로 전달하고, Counter는 이를 받아 상태를 관리한다.
Header는 title이라는 prop을 받아 화면에 표시한다.