게시판 리스트를 리액트 방식으로 변환 예제

1. 리액트 게시판 컴포넌트 구조

이 코드는 **데이터(State)**가 바뀌면 화면이 어떻게 자동으로 변하는지 보여주는 가장 기초적이고 중요한 예시입니다.

JavaScript

 

import React, { useState } from 'react';

// 1. 작은 블록(컴포넌트) 만들기
function BoardItem({ post }) {
  return (
    <div className="board-row" style={{ display: 'flex', borderBottom: '1px solid #ddd', padding: '10px' }}>
      <div style={{ width: '50px' }}>{post.id}</div>
      <div style={{ flex: 1 }}>{post.title}</div>
      <div style={{ width: '100px' }}>{post.writer}</div>
    </div>
  );
}

// 2. 메인 화면 컴포넌트
export default function BoardApp() {
  // 💡 State: 게시글 데이터 관리 (이 값이 변하면 화면이 다시 그려짐)
  const [posts, setPosts] = useState([
    { id: 1, title: "리액트 기초 배우기", writer: "김철수" },
    { id: 2, title: "컴포넌트란 무엇인가?", writer: "이영희" }
  ]);

  // 💡 데이터 추가 함수
  const addPost = () => {
    const newPost = { id: posts.length + 1, title: "새로운 게시글입니다", writer: "익명" };
    setPosts([...posts, newPost]); // 기존 리스트에 새 글 추가
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>리액트 게시판 실습</h2>
      <button onClick={addPost} style={{ marginBottom: '10px' }}>글 추가하기</button>
      
      <div className="board-container" style={{ border: '1px solid #000' }}>
        {/* 💡 반복문(map)을 사용하여 리스트 출력 */}
        {posts.map(post => (
          <BoardItem key={post.id} post={post} />
        ))}
      </div>
    </div>
  );
}

---

2. 이 코드의 핵심 맥락 (기존 방식과의 차이점)

1. 선언적 프로그래밍: 기존(Vanilla JS)에는 document.createElement로 요소를 만들고 appendChild로 직접 집어넣었죠? 리액트에서는 **"데이터가 이러이러하니 화면은 이렇게 그려져야 한다"**라고 미리 선언만 해둡니다. 그러면 데이터(posts)가 바뀔 때 리액트가 알아서 그려줍니다.
2. 데이터 흐름 (Props): BoardApp(부모)이 가진 post 데이터를 BoardItem(자식)에게 전달합니다. 자식은 그 데이터를 받아서 화면에 보여주기만 하는 역할분담이 명확해집니다.
3. 불변성 (Immutability): posts.push()를 직접 쓰지 않고 setPosts([...posts, newPost])처럼 새로운 배열을 만들어 교체합니다. 그래야 리액트가 "어? 데이터가 바뀌었네? 다시 그려야지!"라고 인식하기 때문입니다.

3. 리액트를 시작하기 위한 준비물

이제 이 개념을 실제 컴퓨터에서 실행해 보려면 다음 과정이 필요합니다.

1. Node.js 설치: 리액트 개발 환경을 실행하기 위한 엔진입니다.
2. Vite (또는 Create React App): 리액트 프로젝트의 뼈대를 자동으로 만들어주는 도구입니다.
3. VS Code: 코드를 작성할 에디터입니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.