[React] 리액트 시작하기

❄️ 리액트 폴더 구조 살펴보기

React
├── README.md
├── package.json
├── public
│ ├── favicon.svg
│ ├── index.html
├── src
│ ├── app
│ │ ├── App.css
│ │ ├── App.js
│ │ └── App.test.js
│ ├── assets
│ │ └── logo.svg
│ ├── components
│ │ └── index.js
│ ├── containers
│ │ └── index.js
│ ├── index.css
└─└── index.js

🤔 왜 모든 파일은 src 밑에 들어가 있을까?

• index.html에 직접 연결하는 것보다는 src 폴더 밑에서 import 를 사용하여 포함시키는게 좋다. 그래야 자바스크립트 파일이나 CSS파일의 경우 ✨빌드 시 자동으로 압축되기 때문이다.
• 이미지 파일이나 폰트 파일도 마찬가지로 src 폴더 밑에서 import 키워드를 사용해서 포함시키는 게 좋다. ✨웹팩에서 해시값을 이용해서 url을 생성해 주기 때문에 파일의 내용이 변경되지 않으면 브라우저 캐싱 효과를 볼 수 있다.

❄️ 코드 분할하기

// Todo.js
import React from 'react';

export function Todo({ title }) {
  return <div>{title}</div>;
}


// TodoList.js
import React, { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState([]);
  const onClick = () => {
    // 동적 임포트 사용!!
    import('./Todo.js').then(({ Todo }) => {
      const position = todos.length + 1;
      const newTodo = <Todo key={position} title={'할 일 ${position'} />;
      setTodos([...todos, newTodo]);
    });
  };
  return (
    <div>
      <button onClick={onClick}>할 일 추가</button>
    </div>
  );
}

🤔 코드 분할을 하는 이유는?

• 코드 분할을 사용하지 않으면 전체 코드를 한 번에 내려주기 때문에 첫 페이지가 뜨는 시간이 오래 걸린다.
• ✨동적 임포트란? onClick 함수가 호출되면 비동기로 Todo 모듈을 가져온다. 동적 임포트는 프로미스를 반환하기 때문에 then 메서드를 이용해서 이후 동작을 정의할 수 있다.