11.11.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-2 챕터리뷰(2)

[ 새롭게 알게된 것 ]

---

1. react-router는 서드파티 라이브러리임을 알게됨

---

페이스북 공식 라우팅 라이브러리는 존재하지 않음.

React Router라는 서드파티 라이브러리 공식문서는 존재함.

이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줌

서버 사이드 렌더링도 도와줌.

추가적으로 react-native에서도 해당 라이브러리 사용 가능함

---

 

2. SPA는 렌더링시 서버 자원 사용을 최소화하고 불필요한 트래픽 낭비를 줄임

---

이건 뷰 렌더링을 유저의 브라우저가 담당하고 어플리케이션을 브라우저에 로드한 후 필요한 데이터만 제공하기 때문임

단 리액트 자체에는 SPA를 위한 라우팅 기능이 자체 내장되어 있진 않음.

그래서 직접 브라우저의 API를 사용하고 상태를 설정해 다른 뷰를 보여주어야되서 react-router가 필요한 것을 알게됨

---

 

3. SPA 단점은 앱 규모가 커지면 파일사이즈가 매우 커짐

---

이때 code-spliting이 필요함.

웹팩에서 하라는대로 하는 거랑 직접 코드스플리팅을 loadable-sample 통해서 적용 가능함

먼저 이를 위해선 함수 스플리팅을 알아야하고 import를 알아야됨

import()는 아직 표준은 아니지만 dynamic import라는 문범임

이 import 함수는 모듈을 비동기적으로 불러와 Promise를 반환하기 때문에 default를 명시해주어야함.

그러면 기존의 코드를

  handleClick = () => {
    notify();
  };

아래와 같이 변경해서 사용하면 개발자도구  Network탭에서 1.chunk.js라는 파일을 불러오게 되고 그안에 notify 관련코드 확인 가능함

이렇게 분리된 파일이 청크 파일임

handleClick = () => {
    import('./notify').then(({ default: notify }) => {
      notify();
    });
  };

만약 컴포넌트를 코드 스플리팅 하려면?

  handleClick = () => {
    import('./SplitMe').then(({ default: SplitMe }) => {
      this.setState({
        SplitMe
      });
    });
  };

이런식으로 state안에 있는 컴포넌트가 유효할때만 렌더링 해주는 방식으로 구현 가능함을 알게됨

---

 

4. react-router 드뎌 구현함 근데 원치않는 Link 버튼이 같이 보이는 이유를 모르겠음

---

서드파티 라이브러리 useParams를 참고해서 구현했음.

하지만 홈소개 링크 버튼이 왜 같이 렌더링 되어서 나오는지 이유를 모르겠음.

너무 뿌듯하고 기분이 좋당

지금 대략적으로 유추하기론 서드 파티 라이브러리의 경우 필요한 데이터만 App.js에 뿌려주는 용도라서 그런거일 수도..

Route의 경우에는 아예 해당 컴포넌트로 이동하는 기능이라면 

useParam은 말그대로 특정 컴포넌트 파라미터를 App컴포넌트 상단에 뿌려주는 용도가 아닐까..싶음

---