[React clone coding] #6. 리액트 컴포넌트 기본 틀 잡기

 
 

 
작년 이맘때쯤 호기롭게 클론코딩을 해보자며 CRA로 리액트 프로젝트를 생성했었는데 그것이 어느덧 1년...ㅠㅠ
올해가 끝나기전에 완성은 못하더라도 큰 틀은 만들어두고 싶으니 다시 시작!!

 
일단 나는 눈에 보이게끔 세팅하고 작업하는걸 좋아한다!그것이 프론트엔드의 매력 아닐까요? ㅎ-ㅎ
그러므로 App.tsx파일이 Home.tsx를 라우터로 불러올수 있게 끔 세팅하겠다!
 
 

📁 폴더 구조

오늘 작업한 폴더의 구조는 이렇다.

├── ./src
│   ├── ./src/App.tsx
│   ├── ./src/Routes
│   │   └── ./src/Routes/Home.tsx
│   ├── ./src/index.tsx
│   └── ./src/styles
│       ├── ./src/styles/_fonts.scss
│       ├── ./src/styles/_reset.scss
│       ├── ./src/styles/_variables.scss
│       └── ./src/styles/styles.scss
└── ./tsconfig.json

 

✅ router 사용

라우터를 사용하면 새로고침 없이 페이지 전환이 가능하다.
라우터로 페이지를 불러올 것이니까 react-router-dom을 설치해준다.

npm install react-router-dom

 


 
 
1. Routes 폴더를 생성하고 하위에 Home.tsx 파일을 만들어준다.
이번 프로젝트에서는 사용되는 파일들은 모두 Routes폴더에 만든다.

//Home.tsx
function Home() {
  return <div style={{ backgroundColor: "black", height: "200vh", color: "white" }}>
    <div>
      test<br/>
      test<br/>
      test<br/>
      test<br/>
      test<br/>
    </div>
  </div>;
}

export default Home;

 

 
2. App.tsx코드 변경

//App.tsx
import { Routes, Route } from 'react-router-dom';
import Main from './Routes/Home';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

export default App;

 
이렇게 했더니 오류가 발생한다.
왜냐하면...?
App 컴포넌트 자체가 <BrowserRouter>로 감싸져 있어야한다. 
Home.tsx를 바꾸는 것이 아니라, App.tsx가 라우터의 컨텍스트 안에 있어야 하기 때문에 index.tsx 에서 App을 <BrowserRouter>로 감싸야 한다.

Home.tsx는 단순히 라우팅될 페이지 컴포넌트일 뿐, 라우터 컨텍스트와 직접적인 관계가 없다.

 

 
때문에 index.tsx도 아래와 같이 수정

//index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

그러면 로컬에서 내가 준 스타일대로 화면이 그려지는 것을 확인 할 수 있다!
 
 

---

 

✅ scss 환경 세팅하기

scss를 사용할 것이기 때문에 해당 모듈을 설치해준다.

npm install sass

 
그리고 브라우저를 확인하면 아까와는 다르게 여백이 사라진 화면을 볼 수 있다!
이외 scss관련해서 스타일 주는 부분은 포스팅에서 생략하겠다. 스타일 주는건 자유니까!
 
 
 
다음으로 내가 해볼 작업은 하단에 보이는 nav 컴포넌트 만들기.
그것은 다음 포스팅에 이어서!