📘 리액트 강의 4편 - Props vs State 그리고 컴포넌트 구조화

리액트에서 규모 있는 앱을 만들기 위해서는 컴포넌트를 잘게 나누고, 데이터 흐름을 명확히 해야 합니다.
이번 편에서는 props와 state의 차이를 명확하게 이해하고, 컴포넌트 분리를 통해 코드 구조를 깔끔하게 만드는 방법을 알아봅니다.

---

1. Props vs State 비교

항목 props state

역할	부모 → 자식 전달용 데이터	컴포넌트 자체의 내부 상태
변경 가능 여부	읽기 전용 (변경 불가)	변경 가능 (useState)
누가 관리?	부모 컴포넌트	자신이 관리

---

2. 컴포넌트 구조화란?

초기에는 모든 코드를 App.js에 작성해도 되지만,
프로젝트가 커질수록 컴포넌트를 나눠야 유지보수에 유리합니다.

하나의 파일 = 하나의 역할

---

3. 예제: 게시글 리스트 앱 구조화

💡 목표

• 전체 게시판: App.js
• 게시글 리스트: PostList.js
• 개별 게시글 아이템: PostItem.js

---

📄 PostItem.js

function PostItem({ title, author }) {
  return (
    <div style={{ borderBottom: "1px solid #ccc", padding: "8px" }}>
      <h3>{title}</h3>
      <p>작성자: {author}</p>
    </div>
  );
}

export default PostItem;

---

📄 PostList.js

import PostItem from "./PostItem";

function PostList({ posts }) {
  return (
    <div>
      {posts.map((post, idx) => (
        <PostItem key={idx} title={post.title} author={post.author} />
      ))}
    </div>
  );
}

export default PostList;

---

📄 App.js

import { useState } from "react";
import PostList from "./PostList";

function App() {
  const [posts, setPosts] = useState([
    { title: "React 시작하기", author: "홍길동" },
    { title: "useState란?", author: "김철수" },
  ]);

  return (
    <div>
      <h1>게시글 목록</h1>
      <PostList posts={posts} />
    </div>
  );
}

export default App;

---

4. 핵심 정리

• props는 데이터를 하위 컴포넌트로 전달할 때 사용
• state는 데이터를 직접 보관하고 변경할 수 있는 저장소
• 컴포넌트를 잘게 쪼개고 props로 연결하면 가독성과 재사용성이 좋아짐

---

마무리

이제 하나의 화면을 여러 개의 컴포넌트로 나누고,
데이터를 위에서 아래로 전달하며 구성할 수 있게 되었습니다.