[React] 리액트 코드분할 이유 및 예제

① React 코드 분할을 하는 이유는?

사용자가 웹 페이지를 접속을 하여 main.js 파일이 로드가 된다면
프로젝트 파일이 크면 클수록 로드하는 시간이 많이 걸리고
퀼리티가 저해될 수 있기 때문이다.
그래서 main.js를 여러 파일로 나누어서 용량을 줄일려고 코드 분할을 한다.

② 코드 분할의 방법은?

 

bundler가 설치되어야 한다.

여기서 bundler는 파일을 하나로 병합한 번들 된 파일을 웹 페이지를 포함해

한번에 전체 앱을 로드시켜준다.

 

 

③ bundler 예제

 

App.js

import Top from './components/Top';
import Bottom from './components/Bottom';
import './App.css';
import { useState } from 'react';

function App() {
  const [number, setNumber] = useState(1);

  const increase = () => {
    setNumber(number + 1);
  };

  return (
    <div className="container">
      <h1>최상단 화면</h1>
      <Top number={number} />
      <Bottom increase={increase} />
    </div>
  );
}

export default App;

 

 

Bottom.js

import React from 'react';
import '../App.css';
import SubBottom from './SubBottom';

// 번호 증가 버튼!!
const Bottom = ({ increase }) => {
  // const id = props.id;
  // const name = props.name;
  // const increase = props.increase;

  // 구조 분할 할당
  //const { increase } = props;

  return (
    <div className="sub-container">
      <h1>Bottom</h1>
      <SubBottom increase={increase} />
    </div>
  );
};

export default Bottom;

 

Top.js

import React from 'react';
import { useState } from 'react';
import '../App.css';
import SubTop from './SubTop';

// 숫자를 디스플레이
const Top = ({ number }) => {
  // 상태를 여기서 관리할수가 없군!!
  // const [number, setNumber] = useState(1);

  return (
    <div className="sub-container">
      <h1>Top</h1>
      <SubTop number={number} />
    </div>
  );
};

export default Top;

 

SubBottom.js

import React from 'react';
import '../App.css';

// 번호 증가 버튼!!
const SubBottom = ({ increase }) => {
  // const id = props.id;
  // const name = props.name;
  // const increase = props.increase;

  // 구조 분할 할당
  //const { increase } = props;

  return (
    <div className="sub-container">
      <h1>Bottom</h1>
      <button onClick={increase}>증가</button>
    </div>
  );
};

export default SubBottom;

 

SubTop.js

import React from 'react';
import { useState } from 'react';
import '../App.css';

// 숫자를 디스플레이
const SubTop = ({ number }) => {
  return (
    <div className="sub-container">
      <h1>SubTop</h1>
      번호 : {number}
    </div>
  );
};

export default SubTop;