2021년 4월 30일 코드스테이츠 DAY-26(Twittler SPA with React에서의 삽질 로그)

2021년 4월 29일 코드스테이츠 DAY-25 (Movie app 제작 ERROR 해결로 얻은(?) 지식과 Twittler with "React"에서

어제에 이어서 오늘도 React로 Twittler를 만드는 과제를 수행했다. 

 

하지만 어제(useState)와는 조금 다른 방식으로

 

사용자의 클릭에 반응하는 것(보여주는 Component를 바꿔주는)을 구현하였다.

 

이 반응을 구현하는데에 쓰인 것이 바로 Router였고 Router를 중심으로 한 삽질과 

 

뒤이어 한 모든 삽질을 다 기록해보겠다.

 

첫 삽  : Link Component를 적용하는 방법 

 

상황

react-router-dom을 적용하기 위하여 npm install react-router-dom을 하였고, 이를 App.js에 import하였으며 

 

App.js를 아래와 같이 구성하였다. 

const App = () => {
  return (
    <React.Fragment>
      <BrowserRouter>
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              <Switch>
                <Route exact path="/">
                  <Tweets />
                </Route>
                <Route path="/about">
                  <About />
                </Route>
                <Route path="/mypage">
                  <MyPage />
                </Route>
              </Switch>
            </section>
          </main>
        </div>
      </BrowserRouter>
    </React.Fragment>
  );
};

코드스테이츠의 UR클래스에서 배운대로 BrowserRouter로 잘 감싸주었고

 

Link Component로 감싸진 무언가를 누르면(이 말을 유심히 보자)

 

Link가 나타내는 해당 Component를 불러오도록 Switch와 Route 그리고 Route에 path를 적절하게 넣어주었다.

 

그리고 Sidebar Component의 font에 Link를 아래와 같이 적용하였다.

 

import React from "react";
// TODO - import문을 이용하여 react-router-dom 라이브러리의 Link 컴포넌트를 불러옵니다.
import { Link } from "react-router-dom";

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

      <i className="far fa-question-circle">
        <Link to="/about"></Link>
      </i>

      <i className="far fa-user">
        <Link to="/mypage"></Link>
      </i>
    </section>
  );
};

export default Sidebar;

그런데 아무리 font를 클릭하여도 해당 component로 넘어가지를 않는 상황.

 

해결방법

Link Component의 위치와 폰트의 위치가 서로 뒤바뀐 상황. 이를 반대로 해주면 해결된다. 

import React from "react";
// TODO - import문을 이용하여 react-router-dom 라이브러리의 Link 컴포넌트를 불러옵니다.
import { Link } from "react-router-dom";

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>
  );
};

export default Sidebar;

왜 나의 눈에는 이것이 빨리 발견되지 않았는가.

 

 

두 삽  : 부모 Component에서 전달할 정보를 자식 Component에 직접 전달

 

상황

자식 Component인 Tweet에 dummydata를 import하여 

 

분명히 testcase에서 요구하는 내용(트위터는 5개가 있어야한다.)을 충족 시켰음에도 통과가 되지 않던 상황.

 

해결방법

부모 Component인 Tweets에서 dummy data를 map하여 정보를 전달하여 해결.

 

 

 

아직 React의 문법이 익숙하지 않은 것인지 잔 실수를 범하고 있다. 

 

익숙해지는데에는 많이 보는 수 밖에 없는 것 같다. 

 

아직 React가 많이 어렵게 느껴지는게 사실이라서 가끔씩 HTML과 CSS, Javascript로 웹을 짜는게 그립기도 하지만

 

뭔가 쓰면 쓸수록 편리한 점이 보이게끔 코드스테이츠에서 커리큘럼을 짜 놓은 듯 하여서인지

 

React가 없으면 절망적일 상황들이 조금씩 상상이 된다. 

 

공식적으로 삽질 로그를 처음 작성하였는데 대단한 지식이 없어서라기 보다는 허무한 잔실수 많아서 그런지

 

약간 힘이빠진다. ㅎㅎ

 

이제는 적었으니까 같은 실수를 범하지 않으리.