노드&리액트 공부기록(10) - bolier-plate 기반의 구조로 변환하기

대략적인 구조 설명

 

🤍Boiler - Plate에 맞게 구조를 변경해 보도록 한다.

 

1. src 아래에 _action / _reducers / components / hoc / utils 폴더 생성

• _action / _reducers : Redux를 위한 폴더들
• components/views : Page를 넣을 폴더

 

2. components/views 폴더에 각각의 폴더, 파일 생성

파일 안에는 rfce 단축키로 간단한 함수를 추가해 주었다.

import React from 'react'

function Footer() {
  return (
    <div>Footer</div>
  )
}

export default Footer

 

🤍React Router Dom

• React에서는 페이지 이동 시 React Router Dom 이라는 것을 사용한다.
• 자세한 사용법은 홈페이지에서 확인 가능하다.

3. React-router-dom 다운

npm install react-router-dom --save

 

4. 홈페이지에 나와있는 Documentation에서 코드를 복사해 온다.

 

✅이때 중요한 점은!!!!!

react 5 -> 6으로 업그레이드 되면서 바뀐 내용이 있다. 위에대로 하니까 계속 에러가 나서...ㅎㅎㅎ삽질하다 알게 된 사실...

switch -> Routes 변경

component -> element 변경

 

5. App.js 를 이렇게 수정해주고

localhost:3000/login

localhost:3000/register 이런 식으로 실행해 주면 위에서 만들어둔 파일대로 화면이 알맞게 출력된다.