#5.0 FrontEnd SetUp

CRA를 만들고 필요없는 파일들을 삭제한다.

npx create-react-app 폴더이름

styled-component: Component의 CSS를 위한 모듈
npm i styled-components

react-hook-form: Hook의 form을 만들어준다.
npm i react-hook-form

react-route-dom: Router들을 사용한다.
npm i react-router-dom

@apollo/client graphql: Apollo와 GraphQL에 접근한다.
npm i @apollo/client graphql

react-helmet-async: React App의 tittle을 변경할 수 있게 한다.
npm i react-helmet-async

fortawesome: icon을 보여준다.
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

---

#5.1 Router SetUp

Router를 설정해준다.

//app.js
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./screens/Home";
import Login from "./screens/Login";
import NotFound from "./screens/NotFound";

function App() {
  let isLoggedIn = false;
  return (
    <Router>
      <Switch>// Switch는 URL이 Router들중 하나만 선택하게 한다.
        <Route path="/" exact> // exact를 설정해주면 정확히 일치하는 URL만 route한다.
          {isLoggedIn ? <Home /> : <Login />}
        </Route>
        <Route> // path를 빈상태로 해주면 일치하지 않는 나머지는 이 Route로 들어온다.
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

---

#5.2 React Variables

React Variables는 변화하는 값에 대하여 다른 Components에서 값을 바꿔줄 수 있다. 또 그 변화하는 값에 따라 App.js를 다시 rendering한다.

//apollo.js
import { makeVar } from "@apollo/client";
//초기값을 설정해줘야 한다.
export const isLoggedInVar = makeVar(false);

//app.js
const isLoggedIn = useReactiveVar(isLoggedInVar);

//Login.js
import { isLoggedInVar } from "../../apollo";

function Login() {
    return (
        <div>
            <h1>Login</h1>
            <button onClick={() => isLoggedInVar(true)}>LogIn</button>
        </div>
    );
}

export default Login;

---

#5.3 Styled-Components

변화하는 State에 따라 CSS를 보다 편리하게 변경할 수 있다.

각 styled-components는 Component의 역할을 한다.

//Login.js
import styled from "styled-components";
import { isDarkModeVar } from "../../apollo";

const Title = styled.h1`
  color: ${(props) => props.theme.fontColor};
`;

const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
 `;

function Login() {
    return (
        <Container>
            <Title>Login</Title>
            <button onClick={() => isDarkModeVar(true)}>To dark</button>
            <button onClick={() => isDarkModeVar(false)}>To light</button>
        </Container>
    );
}

export default Login;

theme

ThemeProvider는 제일 상위그룹에 작성해야한다.

//app.js
import { useReactiveVar } from "@apollo/client";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { ThemeProvider } from "styled-components";
import { isDarkModeVar, isLoggedInVar } from "./apollo";
import Home from "./screens/Home";
import Login from "./screens/Login";
import NotFound from "./screens/NotFound";
import { darkTheme, GlobalStyles, lightTheme } from "./styles";

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar);
  const isDarkMode = useReactiveVar(isDarkModeVar);
  return (
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <GlobalStyles />
      <Router>
        <Switch>
          <Route path="/" exact>
            {isLoggedIn ? <Home /> : <Login />}
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Router>
    </ThemeProvider>
  );
}

export default App;

GlobalStyles

Globalstyles로 모든 Components를 한번에 style할 수 있다.

다른 Component의 style의 영향을 안받기 위해 style-reset을 해준다.
npm i styled-reset
모듈설치 후 GlobalStyles에 넣어준다.

//styles.js
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";


export const lightTheme = {
    fontColor: "#2c2c2c",
    bgColor: "lightgray",
};

export const darkTheme = {
    fontColor: "lightgray",
    bgColor: "#2c2c2c",
};

export const GlobalStyles = createGlobalStyle`
    ${reset},
    body{
        background-color: ${(props) => props.theme.bgColor};
    }
`;