# TIL - 2026.08.03

📌 오늘 학습한 주제

• React 18 ReactDOM.createRoot를 통한 엔트리 포인트 설정 및 렌더링 (index.js)
• React JSX 내 데이터 가공 (filter(), map()) 및 리스트 동적 출력 (LibraryPage.jsx)
• React 자식 컴포넌트 생성 및 Props를 통한 데이터 전달 (Book.jsx)

---

💡 오늘 배운 것 — 나만의 언어로

① 오늘의 목표

• React 프로젝트의 진입점 구조를 이해하고, 상위 컴포넌트에서 배열 데이터를 가공하여 하위 컴포넌트로 Props를 전달하는 전체적인 렌더링 흐름 완성하기

② 학습할 내용

• 엔트리 포인트 연동 (index.js): ReactDOM.createRoot(document.getElementById('root'))를 사용하여 메인 HTML 노드에 <LibraryPage /> 컴포넌트를 마운트시켰다.
• 데이터 필터링 및 매핑 (LibraryPage.jsx): 도서 목록 배열 중 특정 카테고리(category === 'lang')에 해당하는 데이터만 filter()로 선별한 후, map()을 이용해 <Book /> 컴포넌트 배열로 변환했다.
• Props 수신 및 출력 (Book.jsx): 자식 컴포넌트인 Book에서 파라미터로 props를 받아 {props.bookName} 형태로 화면에 동적으로 출력했다.

---

💻 오늘 핵심 코드

1. 진입점 렌더링 (index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import LibraryPage from './pages/smaple/LibraryPage';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LibraryPage />
);

reportWebVitals();

2. 상위 컴포넌트 및 데이터 가공 (LibraryPage.jsx)

import Book from "../../components/sample/Book";

const LibraryPage = () => {
  const books = [
    { category: 'it', bookName: 'java', price: '10,000원' },
    { category: 'it', bookName: 'java', price: '10,000원' },
    { category: 'lang', bookName: 'kor', price: '10,000원' },
    { category: 'lang', bookName: 'eng', price: '10,000원' },
    { category: 'essay', bookName: 'xxxx', price: '10,000원' },
    { category: 'essay', bookName: 'xxxx', price: '10,000원' },
  ];

  return (
    <div>
      {
        books
          .filter(book => book.category === 'lang')
          .map((book, idx) => {
            return <Book key={idx} bookName={book.bookName} />;
          })
      }
    </div>
  );
}

export default LibraryPage;

3. 하위 컴포넌트 및 Props 수신 (Book.jsx)

const Book = (props) => {
    return (
        <div>
           <div>
             <span>책이름 : {props.bookName} </span>
           </div>
        </div>
    );
}

export default Book;

✨ 이해한 점

• index.js에서 호출한 상위 컴포넌트(LibraryPage)가 자식 컴포넌트(Book)에 속성(bookName={...})을 전달하고, 자식 컴포넌트에서 props.bookName으로 수신하는 단방향 데이터 흐름(Unidirectional Data Flow)을 이해했다.
• 중괄호 {} 표현식을 사용해 자바스크립트의 변수 및 Props 객체를 HTML UI 레이아웃 안으로 자연스럽게 합성할 수 있다.

---

🛠️ 실습 / 결과물 & 참고 자료

③ 실습 / 결과물

• 강의 실습코드: index.js, LibraryPage.jsx, Book.jsx 코드를 조합하여, React 프로젝트 실행 시 'lang' 카테고리의 책 이름(kor, eng)이 컴포넌트를 거쳐 화면에 출력되는 결과물 구현.

④ 참고 자료

• w3schools / React Official Docs: React Components & Props 예제 참고

---

🔍 문제와 해결

• 막힌 부분: 자식 컴포넌트에서 Props를 수신할 때 전달받은 속성명과 받는 속성명이 일치하지 않거나, map() 렌더링 시 고유 key 값이 누락되어 경고가 발생하는 현상 점검.
• 해결 방법: 상위 컴포넌트의 bookName={book.bookName}과 하위 컴포넌트의 {props.bookName} 이름을 바르게 맞추고, map((book, idx) => ...)에서 key={idx}를 추가하여 마운트를 완성함.

---

🎯 다음에 할 일

• 구조 분해 할당(const { bookName } = props;) 문법을 사용해 Props 코드를 더 간결하게 가꾸어보기
• React State(useState)를 활용하여 사용자가 입력한 데이터가 동적으로 추가/변경되는 기능 구현해보기