❄️ 리액트 폴더 구조 살펴보기
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을 생성해 주기 때문에 파일의 내용이 변경되지 않으면 브라우저 캐싱 효과를 볼 수 있다.
❄️ 코드 분할하기
import React from 'react';
export function Todo({ title }) {
return <div>{title}</div>;
}
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 메서드를 이용해서 이후 동작을 정의할 수 있다.