리액트 - 컴포넌트와 Props & State

React 컴포넌트란?

• React 애플리케이션을 구성하는 독립적이고 재사용 가능한 UI 빌딩 블록.
• 웹 페이지의 특정 부분을 캡슐화하여 관리함 (버튼, 입력 필드, 카드 목록).
• 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나누지만 현재는 함수형 컴포넌트와 Hooks를 사용하는 것이 일반적임.
• 컴포넌트는 데이터를 입력받아(Props) UI를 렌더링하고, 자체적인 상태(State)를 가질 수 있음.

Props (Properties)

• 개념: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용(Read-Only) 데이터로 컴포넌트의 외부로부터 전달받는 속성값.
• 목적: 컴포넌트를 재사용 가능하게 만들고, 부모로부터 자식에게 데이터를 전달하여 동적인 UI를 구성하기 위함.
• 특징:
  • 단방향 데이터 흐름: 데이터는 위에서 아래로 (부모 → 자식) 흐름.
  • 읽기 전용: 자식 컴포넌트는 전달받은 props를 직접 수정해서는 안 됨 (Immutable).
    수정이 필요하면 부모 컴포넌트에서 변경 후 다시 전달해야 함.
• 사용법:
  • 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 HTML 어트리뷰트처럼 전달.
  • 자식 함수형 컴포넌트에서는 함수의 첫 번째 매개변수(보통 props)를 통해 객체 형태로 받음 -> 구조 분해 할당(Destructuring)을 통해 더 간결하게 사용할 수 있음.
  • props.children: 컴포넌트 태그 사이에 작성된 내용(텍스트, 다른 컴포넌트 등)을 전달받는 특수한 prop.
  • import와 export를 통해 받음

예시코드

// 자식컴포넌트인 MyComponent

import React from "react";

// 컴포넌트 함수의 매개변수 자리에서 바로 props 객체를 비구조화 할당
const MyComponent = ({ name = "심구리", children }) => {
    return (
      <div>
        {/* 이제 name은 부모로부터 전달받거나, 전달받지 못하면 기본값 "심구리"가 됨 */}
        안녕하세요 제 이름은 {name}입니다. <br />
        children 값은 {children}입니다.
      </div>
    );
  };

export default MyComponent;

// 부모컴포넌트인 App.js 

import "./App.css";
import MyComponent from "./MyComponent";

//MyComponent를 HTML태그처럼 불러옴 
const App= () => {
  return <MyComponent> 자식 요소 </MyComponent>;
};

export default App;

위 코드와 같이 매개변수 자리에서 바로 props 객체를 비구조화 할당하는 것이 가장 현대적인 코드이고 부모 컴포넌트 태그사이의 내용을 보여주는 children props도 확인할 수 있다.
출력은 아래와 같다.

State

• 개념: 컴포넌트 내부에서 관리되는, 시간이 지남에 따라 변할 수 있는 데이터로 읽기만 하는 Props와 다름.
• 목적: 사용자 상호작용, 네트워크 응답 등 동적인 데이터를 처리하고, 데이터 변경 시 UI를 자동으로 업데이트하기 위함.
• 특징:
  • 컴포넌트 내부 관리: 해당 컴포넌트 내에서 정의되고 관리됨.
  • 변경 가능: useState Hook 등을 통해 상태를 변경할 수 있음.
  • UI 자동 업데이트: 상태가 변경되면 React는 자동으로 다시 렌더링(Re-render)하여 UI를 최신 상태로 유지함.
• useState:
  • 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 Hook으로 가장 많이 쓰이는 함수임!!!!
  • const [값, 값바꾸는함수] = useState(초기값); 형태

예시코드

//자식 컴포넌트인 Say.js
import React, { useState } from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => {setMessage('안녕하세요!')}
    const onClickLeave = () => {setMessage('안녕히가세요!')}
    
    const [color, setColor] = useState('black');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{color}}>{message}</h1>
            <button style={{color:'red'}} onClick={()=>setColor('red')}>빨간색</button>
            <button style={{color:'green'}} onClick={()=>setColor('green')}>초록색</button>
            <button style={{color:'blue'}} onClick={()=>setColor('blue')}>파란색</button>
        </div>
    );
};

export default Say;

// 부모컴포넌트

import "./App.css";
import Say from "./Say";

const App = () => {
  return <Say />;
};

export default App;

위 코드를 보면 배열을 비구조화 할당하여 함수를 호출하면 message, setMessage와 같이 현재 상태와 상태를 바꾸어주는 함수를 반환한다.

퇴장을 누르면 message, setMessage가 반환되어 message 상태값이 '안녕히 가세요'로 바뀐다.

Props vs. State 요약

구분	Props	State
데이터 소유	부모 컴포넌트 (외부)	컴포넌트 자체 (내부)
데이터 흐름	단방향 (부모 → 자식)	컴포넌트 내에서 관리
수정 가능 여부	자식 컴포넌트에서 수정 불가 (Read-Only)	컴포넌트 내에서 수정 가능 (Mutable)
주요 목적	컴포넌트 설정 및 데이터 전달	컴포넌트의 동적인 상태 관리 및 UI 업데이트
함수형 사용	함수의 매개변수로 받음	useState() Hook 사용

추가.. GEMINI의 요약..

ㅋㅋ 커뮤니티식으로 정리해달라니까 이런다..
얘좀봐..

그런데 진짜 이해가 쏙쏙된다!