Slack 클론 코딩 02 [React, Typescript]

 

For Hot Reloading

React나 Vue를 사용해서 개발할 때, 새로고침 필요없이 코드를 수정하면 알아서 reload 되게 하는 것을 hot reloading 이라고 합니다.

Hot Reloading을 위해서 Webpack 데브서버를 설치해줍니다. 

npm i webpack-dev-server -D
npm i webpack-cli
npm i -D @types/webpack-dev-server
npm i @pmmmwh/react-refresh-webpack-plugin
npm i react-refresh
npm i fork-ts-checker-webpack-plugin -D
// 버전 에러나서 버전 수정
npm i @types/webpack-dev-server@3.11.1 -D

 

<Switch>

스위치 안에있는 여러개의 컴포넌트 중 선택된 하나의 컴포넌트만 보여준다.

<Redirect>

현재 path에 따라 path를 바꿔주고 바꾼 path에 맞는 component를 보여준다.

<Route>

해당 컴포넌트를 보여줌

const App = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={LogIn} />
      <Route path="/signup" component={SignUp} />
    </Switch>
  );
};

에러!

You should not use <Switch> outside a <Router>

: client.tsx에서 App 을 BrowserRouter로 감싸준다.

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector('#app'),
);

historyApiFallback : 새로고침하면 그 주소 그대로 있게 해줍니다.

SPA에서는 url이라는게 없고 오로지 index.html만 있습니다. historyApiFallback은 가짜 주소를 입력해줍니다. 새로고침할 때 주소가 서버로 가는데 없는 주소를 실제로 있는 것 처럼 만들어줍니다.

SPA면 페이지가 많아지는데 하나의 자바스크립트 파일로 만들면 페이지 로딩에 시간이 너무 많이 걸린다.

→ 코드스플리팅을 통해서 필요한 컴포넌트만 불러오고 필요없는 컴포넌트는 불러오지 않도록! 페이지 단위로 코드 스플리팅 하는 것을 추천!

→ 서버사이드렌더링이 필요없는 애들은 스플리팅을 통해서 용량을 아낄 수 있습니다.

useCallback

useCallback을 써야 성능 최적화가 가능합니다.
useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.
state값중에 하나라도 바뀔때까지 콜백 안의 함수를 캐싱(기억)합니다.

const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      console.log(email, nickname, password, passwordCheck);
    },
    [email, nickname, password, passwordCheck],
  );

[] 안에있는 값들(변수,state)중 하나라도 바뀌면 useCallback의 함수가 업데이트 됩니다. 바뀌는게 없으면 이전의 함수를 계속 씁니다.

+ virtual DOM 검사

virtualDOM에서 예전과 지금을 비교하고, 이전과 달라진게 있다고 하면 그제서야 달라진 걸 그립니다. 화면이 깜빡이면 → 다시그리는 그 부분에 대해 virtual DOM 검사를 했다는 뜻

+ SPA에서 e.preventDefault() 하는 이유?

form에서 e.preventDefault()를 하지 않으면 페이지가 새로고침되어 버립니다. 새로고침되면 기존 SPA의 상태들이 모두 소실됩니다.