0812 React 수업

React (Chapter 1-4)

Chapter 1: 리액트 스타일

이 Chapter에서는 리액트에서 스타일을 적용하는 방법을 알아본다. 주로 외부 CSS 파일을 사용하여 컴포넌트에 스타일을 적용하는 방법에 중점

App.jsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <h1 className="title">Hello, React!</h1>
      <p className="description">This is a simple React application with styling.</p>
    </div>
  );
}

export default App;

• App.jsx 파일은 주요 리액트 컴포넌트를 정의하는 곳
• className 속성을 사용하여 App.css에서 정의된 CSS 클래스를 적용

App.css

.app {
  text-align: center;
}

.title {
  font-size: 2rem;
  color: #333;
}

.description {
  font-size: 1.2rem;
  color: #666;
}

• App.css 파일에는 App.jsx의 요소에 적용되는 스타일 규칙이 포함
• .app 클래스는 콘텐츠를 중앙에 정렬하고, 다른 클래스는 텍스트 크기와 색상을 정의

---

Chapter 2: JSX

이 Chapter에서는 JSX(JavaScript XML)를 소개 JSX는 리액트 컴포넌트 내에서 HTML 요소를 작성할 수 있는 문법 확장

App.jsx

import React from 'react';
import ChildComponent from './components/ChildComponent';
import FragmentComp from './components/FragmentComp';

function App() {
  return (
    <div>
      <h1>Welcome to the JSX Tutorial</h1>
      <ChildComponent name="John Doe" />
      <FragmentComp />
    </div>
  );
}

export default App;

• JSX를 사용하면 자바스크립트 코드 내에서 HTML과 유사한 문법을 작성할 수 있다
• ChildComponent와 FragmentComp 같은 컴포넌트들이 App 컴포넌트 내에서 사용된다

ChildComponent.jsx

import React from 'react';

function ChildComponent({ name }) {
  return <p>Hello, {name}!</p>;
}

export default ChildComponent;

• ChildComponent는 name이라는 prop을 받아서 이를 표시

FragmentComp.jsx

import React from 'react';

function FragmentComp() {
  return (
    <>
      <p>This is a fragment component.</p>
      <p>It groups multiple elements without adding extra nodes to the DOM.</p>
    </>
  );
}

export default FragmentComp;

• FragmentComp는 여러 요소를 그룹화하여 반환할 때 추가적인 DOM 노드를 생성하지 않도록 Fragment를 사용한다

---

Chapter 3: Component

컴포넌트는 리액트 애플리케이션의 기본 구성 요소 이 Chapter에서는 여러 컴포넌트를 사용하여 애플리케이션을 구조화하는 방법

App.jsx

import React from 'react';
import Header from './components/Header';
import Nav from './components/Nav';
import Article from './components/Article';
import Footer from './components/Footer';

function App() {
  return (
    <div className="app">
      <Header />
      <Nav />
      <Article />
      <Footer />
    </div>
  );
}

export default App;

• App 컴포넌트는 Header, Nav, Article, Footer와 같은 여러 작은 컴포넌트들로 구성

Header.jsx

import React from 'react';

function Header() {
  return <header><h1>My Website</h1></header>;
}

export default Header;

• Header는 웹사이트의 제목을 h1 요소 안에 렌더링하는 간단한 컴포넌트

Nav.jsx

import React from 'react';

function Nav() {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  );
}

export default Nav;

• Nav는 링크 목록을 포함한 기본 탐색 메뉴를 렌더링

---

Chapter 4: Props

Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있도록 함 이 Chapter에서는 리액트에서 Props를 사용하는 방법을 설명

App.jsx

import React from 'react';
import MyComponent from './components/MyComponent';
import YourComponent from './components/YourComponent';

function App() {
  return (
    <div>
      <MyComponent message="Hello from MyComponent!" />
      <YourComponent />
    </div>
  );
}

export default App;

• App 컴포넌트는 message라는 prop을 MyComponent에 전달

MyComponent.jsx

import React from 'react';

function MyComponent({ message }) {
  return <p>{message}</p>;
}

export default MyComponent;

• MyComponent는 부모 컴포넌트로부터 받은 message prop을 표시

Button.jsx

import React from 'react';

function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

• Button 컴포넌트는 onClick 이벤트 핸들러와 label이라는 prop을 받아 클릭할 수 있는 버튼을 렌더링

---

이 Chapter들을 따라가며 스타일링, JSX, 컴포넌트, 그리고 Props와 같은 리액트의 기본 개념들을 확실하게 이해할 수 있습니다. 각 개념은 견고한 리액트 애플리케이션을 구축하는 데 중요한 요소들이다.