5. twitter clone 하기 - 라우터 적용하기(1)

1. 라우터 준비하기

• 리액트에서 프로젝트 구조 구성은 라우터를 적용하기 위해 한다고 생각해도 됩니다.
  => 라우터란 주소 표시줄에 site.com/a 나 site.com/b 와 같은 주소를 입력했을 때 어떤 컴포넌트를 보여 줄지 결정하는 역활을 함
• 라우터가 제대로 동작하려면 라우터가 이해할 수 있도록 파일과 폴더를 구성해야 합니다.
• 라우터를 적용하기 전에 프로젝트의 뼈대를 세워야 합니다.
  => 페이지는 routes 폴더에 저장하고 페이지를 이루는 구성 요소들은 components 폴더에 나눠서 저장합니다.
•  App.js 파일은 components 폴더에 옮기고, routes 폴더에는 Auth.js, EditProfile.js, Home.js, Profile.js 를 만듭니다.

router에 맞게 파일 정리하기

• index.js 파일에서 App.js 파일을 참조하고 있으므로 import App from "./App" 을 import App from "./components/App"으로 수정합니다.
• 새로 생성한 파일들에 내용을 추가합니다.

// Auth.js
const Auth = () => {
  return <div>
  		   Auth
         </div>
}

export default Auth

// EditProfile.js
const EditProfile = () => {
  return <div>
  		   EditProfile
         </div>
}

export default EditProfile

// Home.js
const Home = () => {
  return <div>
  		   Home
         </div>
}

export default Home

// Profile.js
const Profile = () => {
  return <div>
  		   Profile
         </div>
}

export default Profile

• 터미널에 아래의 명령어를 입력해서 라우터를 설치합니다.

npm install react-router-dom

• Router.js 파일을 아래와 같이 수정하여서 라우터를 설정합니다.

// Router.js

// as 를 이용하여 HashRouter의 이름을 Router 로 정의
import { HashRouter as Router, Route, Switch } from "react-router-dom"

const AppRouter = () => {
  return <Router>
  		   <Switch>
             <Route />
           </Switch>
         </Router>
}

export default AppRouter

 

2. 라우터 적용하기

• 라우터는 어떤 컴포넌트를 렌더링 할지 결정하는 역활을 합니다.
  => 컴포넌트 : 화면을 표현하기 위한 조각, 렌더링 : 그린다라는 뜻
• 리액트는 두 가지 형태로 컴포넌트를 사용할 수 있고, 두 컴포넌트는 컴포넌트에서 변경할 수 있는 변수. 즉, 상태를 관리하는 방법이 다릅니다.

* 리액트의 컴포넌트 종류
- 컴포넌트란 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 주는 기능과 라이프 사이클 API 를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변화할 때 작업들을 수행할 수 있습니다.
             * 라이프 사이클 API(LifeCycle API) : 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등
               어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말합니다. 
    * 컴포넌트 종류 2가지
     ⅰ 프레젠테이셔널 컴포넌트
        - View 만을 담당하는 컴포넌트 입니다. => UI를 작성합니다.
        - 이 컴포넌트 안에서는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 둘다 사용 가능합니다.
        -  리덕스에 직접 접근하지 않고 props 로만 데이터나 함수를 가져올 수 있습니다.
        - 주로 함수형 컴포넌트로 작성됩니다.
     ⅱ 컨테이너 컴포넌트
        - 다른 프레젠테이션 컴포넌트나 컨테이너 컴포넌트를 관리합니다.
        - 내부에 DOM 엘리먼트(UI)를 작성하지 않습니다. 만약에 사용하는 경우는 감싸는 용도로만 사용됩니다.
        - 스타일을 가지고 있지 않습니다.
        - 스타일은 모두 프레젠테이셔널 컴포넌트 내부에 저으이되어야 합니다.
        - 상태를 가지고 있고 리덕스에 직접 접근하여 데이터를 가지고 옵니다.
- 클래스형 컴포넌트 : 함수형 컴포넌트와 Hook 이 등장하기 이전에 사용하던 컴포넌트 형태 입니다. ES6(ECMA Script 2015)부터 추가된 JavaScript의 Class를 바탕으로 컴포넌트를 작성합니다. 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖습니다.
- 함수형 컴포넌트 : 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수 입니다. 컴포넌트 구조를 단순하게 유지학자 할 때 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 것이 좋습니다. state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌리기 때문입니다.

 

• 함수 컴포넌트에서 상태 관리를 위해서 Hooks를 사용합니다.
• Hooks를 사용하려면 useState를 리덕스에 직접 접근하여 데이터를 가져옵니다.
• useState는 인자로 [상태, 상태 관리 함수 이름] 형태의 배열을 입력받습니다.

 

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.