수업을 듣고 정리한 글입니다.

1. Root Render

---

React 애플리케이션에서는 ReactDOM 라이브러리를 사용하여 렌더링한다. 이를 위해 ReactDOM.render() 를 사용한다. 하지만 React 18에서는 createRoot() 함수를 사용하여 렌더링할 수도 있다.

import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<div>내용내용내용</div>);

2. JSX

---

JSX란 React에서 UI를 구성하는 요소(element)를 생성하기 위한 문법이다. JSX는 JavaScript 문법을 확장하여, HTML과 유사한 문법을 사용해 UI를 선언할 수 있도록 해준다. 위에서 root.render() 부분 안에 있는것도 JSX이다.

import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

// JSX를 사용하여 요소(element) 생성
const element = <h1 className="header">Hello, World!</h1>;

// 렌더링
root.render(element);

예시

JSX를 이용해 간단한 예제를 작성해보자.

import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <div>
    <ul>
      <li>Thing 1</li>
      <li>Thing 2</li>
    </ul>
    <p>this is paragraph</p>
  </div>
);

참고로 root.render() 부분에서는 안에 있는 요소가 여러개라면 하나의 태그로 묶어줘야 한다. 그렇지 않으면 오류가 난다.

3. 함수형 컴포넌트

---

함수형 컴포넌트는 React에서 컴포넌트를 만드는 방법 중 하나이다. 이전에는 class 컴포넌트를 사용했지만, 최신 버전의 React에서는 함수형 컴포넌트를 사용하는 것이 일반적이다.

함수형 컴포넌트는, 이름 그대로 함수를 이용하여 컴포넌트를 정의한다. 함수형 컴포넌트는 일반적으로 하나의 반환값을 가지며, 그 반환값은 JSX를 사용하여 정의된다.

다음은 간단한 함수형 컴포넌트의 예시이다.

function MainContent() {
  return (
    <div>
      <h1>Fun facts about React</h1>
      <ul>
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}

root.render(<MainContent />);

또한 이런 함수형 컴포넌트를 여러개 만들 때에는 components 폴더를 만들어 관리한다.

// components/MainContent.js
function MainContent() {
  return (
    <div>
      <h1>Fun facts about React</h1>
      <ul>
        <li>Was first released in 2013</li>
        <li>Was originally created by Jordan Walke</li>
        <li>Has well over 100K stars on GitHub</li>
        <li>Is maintained by Facebook</li>
        <li>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
    </div>
  );
}

export default MainContent;

// components/Header.js
function Header() {
  return (
    <nav>
      <img src="logo.svg" />
      <p>React Course - Project 1</p>
    </nav>
  );
};

export default NavBar;

// App.js
import NavBar from "./components/NavBar";
import Main from "./components/Main";

function App() {
  return (
    <div>
      <NavBar />
      <Main />
    </div>
  );
}

export default App; 

참고로 Header 컴포넌트에서 이미지 경로가 "logo.svg" 인 이유는 public 폴더에 logo.svg 파일과 index.html 파일이 있는데, JSX는 html 태그를 html 안에 집어넣는것이기 때문에 JSX를 이용하는 파일 기준의 경로가 아닌 index.html 기준의 경로를 적어줘야 하기 때문이다.