[Genie95] #5. React Props란?

React에서 props란?

리액트 컴포넌트끼리 데이터를 주고받을 때는 어떻게 해야 할까요?
Windows 95 테마 포트폴리오 웹사이트를 만들면서 직접 겪은 props의 개념과 실전 적용 방법을 정리해보았습니다.

---

🧩 상황: 컴포넌트 간 데이터 전달, 어떻게 해야 할까요?

프로젝트 초반, 데스크탑 UI를 구현하기 위해 아이콘을 클릭하면 창이 열리도록 만들고자 했습니다.

이때 아이콘 컴포넌트는 클릭 이벤트를 감지하고,
창 컴포넌트는 열리고 닫히는 상태를 제어해야 하는 구조였는데요.

 

두 컴포넌트가 서로 다른 파일로 분리되어 있어 데이터를 어떻게 주고받아야 할지 고민이 생겼습니다.

 

✅ 해결 방법: props로 함수 전달하기

React에서는 컴포넌트 간의 데이터 전달을 props를 통해 처리합니다.

부모 컴포넌트가 자식 컴포넌트에게 props를 통해 데이터나 함수를 넘겨주면,
자식 컴포넌트에서는 그것을 사용할 수 있습니다.

👇 아래는 예시 코드입니다:

// 부모 컴포넌트 (예: Desktop)
import Icon from './Icon';
import Window from './Window';

function Desktop() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => setIsOpen(true);

  return (
    <>
      <Icon onDoubleClick={handleOpen} />
      {isOpen && <Window />}
    </>
  );
}

// 자식 컴포넌트 (예: Icon)
function Icon({ onDoubleClick }) {
  return (
    <div onDoubleClick={onDoubleClick}>
      <img src="folder.png" alt="폴더 아이콘" />
      <span>내 문서</span>
    </div>
  );
}

 

📌 요약하자면,
Desktop 컴포넌트가 Icon에 onDoubleClick 함수를 전달하고,
Icon 컴포넌트에서는 전달받은 함수를 실행하여 부모의 상태를 변경하는 구조입니다.

 

📚 배경 지식: props란?

props는 "properties"의 줄임말로, 리액트에서 컴포넌트 간에 데이터를 주고받는 유일한 방법입니다.

• props는 읽기 전용입니다.
• 부모 → 자식 방향으로만 전달됩니다.
• 함수도 props로 전달이 가능합니다.

📌 단방향 데이터 흐름(one-way data flow)은 리액트의 핵심 설계 원칙 중 하나로, 예측 가능한 UI를 만드는 데 중요한 역할을 합니다.

---

🧠 정리하며

이번 프로젝트를 통해 props의 개념을 단순한 문법이 아닌, 실제 구조 안에서 왜 필요한지 몸소 이해할 수 있었습니다.

컴포넌트를 설계할 때는 "어느 컴포넌트가 상태를 가져야 하는가?", "어떤 컴포넌트가 행동을 일으키고, 어떤 컴포넌트가 반응해야 하는가?"를 고민하면서 props를 활용하는 것이 중요하다고 느꼈습니다.