[React] 리액트 컴포넌트 만들기

 

✔ 커스텀 컴포넌트는 실제로 렌더링된 DOM에 나타나지 않는다 

✔ 이것이 바로 커스텀 컴포넌트를 대문자로 시작하는 이유. Header(커스텀 컴포넌트)와 header(내장요소) 

 

✔ 중괄호를 잘 봐 

중괄호 사이에 원하는 걸 넣을 수 있음 

불변동 내용과 동적 값을 혼합하는 문법임! 

 

 

---

✍ props 속성 사용하기 

// Important:
// For this project to work on CodeSandbox, image assets ("assets") folder
// must be stored in the public folder (as it's the case by default in this project)

// 이미지 불러오기
// 이 이미지는 결국 자바스크립트 객체라고 할 수 있다. 정확히 말하면 자바스크립트 변수로 해당 이미지로 이동하는 경로를 포함한 해당 이미지를 가리킨다고 할 수 있다.
import reactImg from "./assets/react-core-concepts.png";
import componentImg from "./assets/components.png";

// 추가
const reactDescriptions = ["Fundamental", "Crucial", "Core"];

function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

// 2025-02-09 Header 컴포넌트 만듦
// 중괄호 문법 적용
function Header() {
  // 이렇게 상수로 빼서 사용할수도 있다
  const description = reactDescriptions[genRandomInt(2)];

  return (
    <header>
      {/* <img src="assets/react-core-concepts.png" alt="Stylized atom" /> */}
      {/* 여기도 중괄호 문법 사용 가능. 단 동적으로 사용할 때는 반드시 따옴표를 생략해야함*/}
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {/* {reactDescriptions[genRandomInt(2)]} React concepts you will need for
        almost any app you are going to build! */}
        {description} React concepts you will need for almost any app you are
        going to build!
      </p>
    </header>
  );
}

// 43강 prop 으로 컴포넌트 재사용하기
function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <section id="core-concepts">
          <h2>Core Concepts</h2>
          <ul>
            <CoreConcept
              title="제목1"
              description="내용1"
              image={componentImg}
            />
            <CoreConcept />
            <CoreConcept />
            <CoreConcept />
          </ul>
        </section>
      </main>
    </div>
  );
}

export default App;