7. twitter clone 하기 - 파이어베이스 로그인 준비하기(1)

1. useState 함수 위치 이동하기

• useState 함수의 위치를 변경하고 appRouter 컴포넌트에 isLoggedIn 프롭스를 추가합니다.
• AppRouter 컴포넌트가 라우터 역활을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는 것이 좋습니다.
• App 컴포넌트에 footer 엘리먼트도 추가합니다.
  => footer 엘리먼트는 사이트 아래에 있는 요소 입니다. footer은 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있습니다.

// ./src/components/App.js
import { useState } from "react"
import AppRouter from "./Router"

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
   return <div>
   			<AppRouter isLoggedIn={isLoggedin} />
            <footer>
              &copy; {new Date().getFullYear()} twitter  {// JSX 문법에서는 자바스크립트 코드를 삽입할때는 코드를 중괄호로 감싸야함}
            </footer>
   </div>
}

export default App

• new Date().getFullYear() 는 현재 연도를 반환해 주는 자바스크립트 함수 입니다.
  => 주어진 날짜를 현지 시간 기준으로 연도를 반환하는 메서드 입니다.
• App 컴포넌트로 상태를 옮겼으므로 App 컴포넌트에서 isLoggedIn을 AppRouter 에 넘기고 App Router는 이를 받아서 사용할수 있도록 코드를 수정합니다.

// ./src/components/Router.js
import { HashRouter as Router, Router, Switch } from "react-router-dom"
import Auth from "../routes/Auth"
import Home from "../routes/Home"

const AppRouter = ({ isLoggedIn }) => {  // 상위 컴포넌트에서 받은 props를 구조 분해 할당으로 사용
  return <Router>
(... 생략 ...)

• App 컴포넌트에서 isLoggedIn 값이 바뀌면 AppRouter 컴포넌트에서 받은 isLoggedIn 값이 바뀌니 앱은 동일하게 동작합니다. isLoggedIn 의 초깃값은 false 이므로 Auth 컴포넌트가 화면에 보여집니다.

2. jsconfig.json 파일에 절대 경로 적용하기

• 다른 파일을 불러올때 import 문을 사용하여 상대 경로를 사용하는데 파일 경로를 보면 ../routes/Home 처럼 가독성이 좋지 않기 때문에 절대 경로를 설정해줍니다.
• jsconfig.json 파일을 추가 해줍니다.
  => 리액트에 사용할 자바스크립트를 위한 설정파일을 말합니다. 자바스크립트 설정을 사용자가 원하는 상태로 바꿀수 있습니다.

// ./jsconfig.json
{
  "compilerOption": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

• 위의 코드를 작성하면 절대 경로를 사용할 수 있어서 src 폴더를 기준으로 폴더나 파일 경로를 적을 수 있어서 import 문의 가독성이 좋아집니다.

* jsconfig.json
- jsconfig.json 파일이 없을 때는 모든 파일들이 독립적인 개체들로 다루어지고, 파일이 있을 때는 프로젝트에 속해 있는 개체로 인식함

• 기존 파일에서 상대 경로가 사욛되는 모든 곳을 수정합니다.

// ./ src/components/App.js
import { useState } from "react"
import AppRouter from "components/Router"

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false)
  return <div>
(... 생략 ...)

// ./src/components/Router.js
import { HashRouter as Router, Route, Switch } from "reactp-router-dom"
import Auth from "routes/Auth"
import Home form "routes/Home"

const AppRouter = ({ isLoggedIn }) => {
  return <Router>
(... 생략 ...)

// ./src/index.js
import React from "react"
import ReactDom from "react-dom"
import App from "components/App"

ReactDom.render(
(... 생략 ...)

• 절대 경로를 사용하면 파일 이름과 npm install 로 설치한 패키지 이름이 파일 이름과 같으면 오류가 발생할 수 있습니다. 따라서 firebase.js 파일 이름을 fbase.js 로 변경합니다.

firebase.js 이름 변경전

firebase.js 이름 변경 후 

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