[오픈미션] 리액트 공부 2

컴포넌트, JSX

리액트는 페이지 단위가 아닌 컴포넌트 단위로 나눠서 조합해서 구현함

import './App.css';

function App() {
  const name = "Soojin";
  const naver = {
    name: "네이버",
    url: "https://www.naver.com"
  }
  return (
    <div className="App">
      <h1 
        style={{
          color: "yellow",
          backgroundColor: "black",
        }}>Welcome, {name}
        </h1>
        <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

컴포넌트 만들기

component 폴더 만들고 그 안에 넣음

const Hello = () => {
    return <p>Hello</p>
}

export default Hello;

export default function Hello() {
    return <p>Hello</p>
}

위 아래 코드가 같은 것

import './App.css';
import Hello from './component/Hello';

function App() {

  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

사용하는 곳에 임포트 해줘야함

• import Hello from './component/Hello';

사용할때는 그냥 태그로 써주면 됨

• <Hello />

 

Jsx는 하나의 태그로만 구성됨

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1>Hello</h1>
        <World />
    </div>
    );
}

위처럼 작성하면

이렇게 잘 표현됨

 

하지만 div 태그를 제거하면

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1>Hello</h1>
        <World />
    </div>
    );
}

이렇게 오류남

+ div가 아닌 빈 태그로 감싸줘도 됨

 

CSS 작성법

1. 인라인 태그로 작성

• 객체로 작성해야함 ⇒ 중괄호 안에 중괄호 하나 더 해서 작성

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1 style={
            {
                color : "blue",
                backgroundColor: "yellow"
            }
        }>Hello</h1>
        <World />
    </div>
    );
}

 

- 말고 카멜 케이스로 작성
숫자는 그냥 기입해도 되는데, px 붙는거는 따옴표로 감싸줘야 함

2. 일반 CSS 파일

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

function App() {

  return (
    <div className="App">
      <Hello />
      <Welcome />
      <div className='box'></div>
    </div>
  );
}

export default App;

App.js

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

App.css

 

3. CSS Module 파일

.box {
  width: 200px;
  height: 100px;
  background-color: rebeccapurple;
}

Hello.module.css

 

import styles from "./Hello.module.css";

<div className={styles.box}></div>

Hello.js

• 컴포넌트별로 스타일이 자동 네임스페이스 처리됨
• 클래스 충돌 방지

 

이벤트 처리

1. 먼저 함수를 만들어 놓고 사용

export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button>Show age</button>
    </div>
    );
}

2. 내부에 직접 함수 호출

export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button onClick={() => {
            console.log(30);
        }}>Show age</button>
    </div>
    );
}

이 방식의 장점은 매개변수를 전달하기 쉬움

export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    function showAge(age) {
        console.log(age);
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button onClick={() => {
            showAge(30);
        }}>Show age</button>
    </div>
    );
}

State 

import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState("Mike");

  function changeName() {
    setName(name === "Mike" ? "Jane" : "Mike");
  }

  return (
    <div>
      <h2>{name}</h2>
      <button onClick={changeName}>changeName</button>
    </div>
  );
}

state를 바꾸면 자동으로 화면도 다시 렌더링됨
state를 직접 수정해도 렌더링 X → 반드시 setState 사용

라우터 구현

npm install react-router-dom 

라우터 설치

import { BrowserRouter, Route, Switch } from "react-router-dom";

App.js에 불러오기

import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<DayList />} />
        <Route path="/day" element={<Day />} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

• Link를 써야함 href 대신

import { Link } from 'react-router-dom';
import dummy from '../db/data.json';

export default function DayList() {
    console.log(dummy);
    return <ul className='list_day'>
        {dummy.days.map(day => (
            <li key={day.id}>
                <Link to="/day">Day {day.day}</Link>
            </li>
        ))}
    </ul>;
}

• 다이나믹 라우트 이용할때는 콜론 이용 (:)

import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import EmptyPage from "./component/EmptyPage";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<DayList />} />
        <Route path="/day/:day" element={<Day />} />
        <Route path="*" element={<EmptyPage />} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

이 경우 day라는 변수로 값을 받을 수 있음

그리고 day로 보내진 값은 useParams를 사용해서 이용

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";

export default function Day() {
    const a = useParams();
    const day = Number(a.day);

    const wordList = dummy.words.filter(word => (
        word.day === day
    ));

    return <>
    <h2>Day {day}</h2>
    <table>
        <tbody>
            {wordList.map(word => (
                <tr>
                    <td>
                        {word.eng}
                    </td>
                    <td>
                        {word.kor}
                    </td>
                </tr>
            ))}
        </tbody>
    </table>
    </>
}

json-server 사용하기

npm install -g json-server

json-server --watch ./src/db/data.json --port 3001

 

 

참고 강의

https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

React js 강좌