[코벤져스 스터디-7일차] React Twittler State & Props

Saeda·2023년 5월 23일

오늘의 과제는 그동안 배운 state, props를 활용하여 유저 parkhacker의 Twittler에서의 트윗 전송 기능을 구현한다. 이번 스프린트의 핵심은 트윗 추가 및 추가된 트윗 조회 기능 구현을 하는 것이다.

사실은 오늘 과제가 그동안의 과제 중 가장 어려웠지만 재밌었다 ^-^...ㅎ
그래도 앞으로 산이 더 많을테니 화이팅~! 해야지~!

오늘 구현해야하는 화면 예시이다.

(출처 : 코드스테이츠)
1. fork -> git clone 하여 react-router-dom 설치하고
2. 상세 컴포넌트 구현하고
3. 페이지 컴포넌트 구현하고
4. React Router 적용하고
5. State, Props 활용 트윗 전송 Form 만들면 끝이다!

그중에 나는 4번인 React Router 적용에서 가장 애를 많이 먹었다.

App.js React Router 컴포넌트 적용
✓ Route path가 "/" 인 Tweets 컴포넌트가 있어야 합니다. (9 ms)
✓ Route path가 "/about" 인 About 컴포넌트가 있어야 합니다. (4 ms)
✓ Route path가 "/mypage" 인 MyPage 컴포넌트가 있어야 합니다. (3 ms)
✓ React Router의 Link 컴포넌트가 3개 있어야 합니다. (2 ms)
✓ Tweets 아이콘의 Link 컴포넌트는 "/" 로 연결되어야 합니다. (2 ms)
✓ About 아이콘의 Link 컴포넌트는 "/about" 로 연결되어야 합니다. (1 ms)
✓ MyPage 아이콘의 Link 컴포넌트는 "/mypage" 로 연결되어야 합니다. (1 ms)

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다.

app.js의 처음 시작 부분이다.
나는 전 과제의 기억을 되살려 컴포넌트를 작성하였다.

import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
// TODO : MyPage, About 컴포넌트를 import 합니다.

그리고 MyPage, About 컴포넌트를 import 하고

const App = (props) => {
  return (
    <BrowserRouter>
    <div className="App">
      <main>
        <section className="sidebar">
              <Link to="/"><i className="far fa-comment-dots"></i></Link>
              <Link to="/about"><i className="far fa-question-circle"></i></Link>
              <Link to="/mypage"><i className="far fa-user"></i></Link>
        </section>
        <section className="features">
          <Routes>
            <Route path='/' element={<Tweets/>}></Route>
            <Route path='/about' element={<About />}></Route>
            <Route path='/mypage' element={<MyPage />}></Route>
          </Routes>
          {/* TODO : 유어클래스를 참고해서, 테스트 케이스를 통과하세요.
            TODO : React Router DOM 설치 후 BrowserRouter, Routes, Route의 주석을 해제하고 Routes, Route 컴포넌트를 적절하게 작성합니다. /}
          {/ Route 예시: <Route path="/" element={<Tweets />}></Route> */}
        </section>
      </main>
    </div>
    </BrowserRouter>
  );
};

마지막으로 link와 컴포넌트를 전부 작성하였다.

여기서 나는 여러가지 실수를 한걸 발견하였는데..
1. import { BrowserRouter, Routes, Route } from 'react-router-dom'; 부분에서 Link를 누락하였음
2. 자식 컴포넌트인 Sidebar를 삭제함
3. Link 부분을 잘못 작성함

이 세가지 실수 덕분에 많이 헤메였다.

그중 세번째인 Link 부분에 대해서 왜 실수를 하였는지 생각해보았는데 .. 정말 놀랍게도...
sidebar.js 파일을 확인하지못해서 발생한 실수였다..!

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : About 메뉴 아이콘과 Mypage 메뉴 아이콘을 작성하고 Link 컴포넌트를 이용하여 경로(path)를 연결합니다. */}
      <Link to="/">
        <i className="far fa-comment-dots"></i>
      </Link>
      <Link to="/about">
        <i className="far fa-question-circle"></i>
      </Link>
      <Link to="/mypage">
        <i className="far fa-user"></i>
      </Link>
    </section>
  );
};