[모각코+] 웹 리액트(React) 1월달과정 9일차

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%9D%EC%84%B1

✅ 오늘의 문제 : 새로운 페이지 생성 by Qcell | 코드메이트

✅ 오늘의 문제 : 새로운 페이지 생성

이번 시간에서는 리액트의 특성 중 하나인 SPA(Single Page Application)을 학습했습니다.

말 그대로 리액트는 페이지가 하나인 어플리케이션이라는 뜻으로, HTML의 a로 링크를 만드는 것과는 확연히 다른 구조였습니다. react-router-dom 라이브러리를 설치한 뒤에 사용했습니다.

 

✔ index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root'),
);

 

페이지 폴더를 따로 만들어서 컴포넌트를 분리한 뒤에, Layout으로 모두 감싸주었습니다.

 

App.js

import youtubeData from './data/youtubeData.json';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Explore from './pages/Explore';
import Subscription from './pages/Subscription';
import Assignment from './pages/Assignment';


function App() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/explore" element={<Explore />} />
            <Route path="/subscription" element={<Subscription />} />
            <Route path="/assignment" element={<Assignment />} />
        </Routes>
    );
}


export default App;

 

Menu.js

import { Link } from 'react-router-dom';
import styles from './Menu.module.css';


function Menu() {
  return (
    <div>
      <div>
        <Link to="/">홈</Link>
      </div>
      <div>
        <Link to="/explore">탐색</Link>
      </div>
      <div>
        <Link to="/subscription">구독</Link>
      </div>
      <div>
          <Link to="/assignment">과제</Link>
      </div>
    </div>
  );
}


export default Menu;

 

그리고 오늘의 과제는 8일차의 삼항연산자 과제를 출력 할 Assignment 페이지를 생성하고, 메뉴에 링크를 추가하여 링크를 클릭하였을 때 8일차의 삼항 연산자 예제가 출력되어야 하는 문제였습니다.

 

이를 학습함으로써, 구독 링크를 클릭하였을 때 구독 아이콘이 변화하는 기능을 구현할 수 있을 것 같습니다.

 

Assignment.js

import Layout from '../components/shared/Layout';
import { useState } from 'react';
import styles from '../App.module.css';
function Assignment() {


    const [check,setSub]=useState(false);


    function subScribe(){
        setSub(check=>!check);
    }
  return (
    <Layout>
    {check?
    <button className={styles.sub2} onClick={subScribe}>구독중</button>:<button className={styles.sub1} onClick={subScribe}>Subscribe</button>}
    </Layout>
  );
}


export default Assignment;