🌗 The Art of React part4

🐳 프로젝트 정리

• 이번 시간에는 기본적인 프론트엔드의 작업 환경 설정을 하였습니다.
• 라우트의 경로를 지정할 수 있게 도와주는 react-router-dom 라이브러리에서 Router를 사용하였습니다.
• path의 @ 입력하면 경로의 파라미터를 읽을 수 있게 합니다.(Medium,브런치와 같은 곳에서 대표적으로 사용)
• 스타일 설정을 위해 styled-components를 이용하였습니다.
• styled-components는 자바스크립트 파일안에서 CSS 설정을 할 수 있게 도와주는 라이브러리입니다.
• 재사용이 가능한 컴포넌트의 경우에는 따로 분리하여 필요할 때마다 import하여 쓸 수 있게 만들고 재사용성을 높일 수 있습니다.
• redux를 사용할 예정인데 리덕스는 리액트를 보완해주며 action에 반응하여 상태를 변경해줍니다.
• 리덕스를 사용하므로 리액트의 local state와 global state가 관리하기 어려운 문제를 해결해줄 수 있습니다.

🐙 코드

//App.js
import './App.css';
import React from "react";
import { Route } from "react-router-dom";
import PostListPage from "./pages/PostListPage";
import LoginPage from "./pages/LoginPage";
import PostPage from "./pages/PostPage";
import RegisterPage from "./pages/RegisterPage";
import WritePage from "./pages/WritePage";

const App = () => {
  return (
    <>
      {/* "/@:username"  username 파라미터를 읽을 수 있게 해줌 */}
      <Route component={PostListPage} path={["/@:username", "/"]} exact />
      <Route component={LoginPage} path={["/login"]} />
      <Route component={RegisterPage} path={["/register"]} />
      <Route component={WritePage} path={["/write"]} />
      <Route component={PostPage} path={["/@:username/:postId"]} />
    </>
  )
}

export default App;


//AuthForm.js
import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import palette from "../../lib/styles/palette";
import Button from "../common/Button";

//  회원가입 또는 로그인 폼을 보여줍니다.
const AuthFormBlock = styled.div`
    h3 {
        margin:0;
        color:${palette.gray[8]};
        margin-bottom:1rem;
    }
`;
(...)


const AuthForm = () => {
    return (
        <AuthFormBlock>
            <h3>로그인</h3>
            <form>
                <StyledInput autoComplete="username" name="username" placeholder="아이디" />
                <StyledInput autoComplete="new-password" name="password" placeholder="비밀번호" type="password" />
                <Button>로그인</Button>
            </form>
            <Footer>
                <Link to="/register">회원가입</Link>
            </Footer>
        </AuthFormBlock>
    );
};

export default AuthForm;

참조 : 리액트를 다루는 기술