[ 3주차 기본/심화/생각 과제 ] 점메추 과제 #6
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # 리액트에 대하여 'ㅅ' | ||
|
|
||
| ### 🐥 컴포넌트 분리하기 | ||
|
|
||
| - <h4>components 폴더</h4> | ||
| <h5>재사용 가능한 작은 단위의 **컴포넌트** 저장하는 폴더</h5> | ||
| <h5>버튼, 인풋박스, 모달 등의 컴포넌트</h5> | ||
| - <h4>pages 폴더</h4> | ||
| <h5>페이지 단위의 컴포넌트를 저장하는 폴더</h5> | ||
| <h5>로그인 페이지, 회원가입 페잊, 대시보드 페이지</h5> | ||
|
|
||
| ### 🍏 Props Drilling이란? | ||
|
|
||
| - <h4>리액트는 단방향 데이터 흐름</h4> | ||
| <h5>상위 컴포넌트의 state가 변화되면 하위 컴포넌트 props로 상태를 넘긴다</h5> | ||
| <h5>전달할 props가 많다면 코드를 읽을 때 해당 props들을 추적하기 힘들다</h5> | ||
| <h5>상태가 여러곳에 걸쳐있어 의존된 컴포넌트들이 많다면? Props Drilling 발생!</h5> | ||
| - <h4>children 사용해보기</h4> | ||
| <h5>{children}으로 전달해서 하나의 컴포넌트에서 관리할 수 있다</h5> | ||
|
|
||
|
|
||
| ### 🍎 좋은 상태 관리 | ||
| - <h4>전역 상태관리 라이브러리 사용</h4> | ||
| <h5>redux, MobX, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용</h5> | ||
| - <h4>응집성 향상</h4> | ||
| <h5>state는 연관 컴포넌트들과 가까이 배치</h5> | ||
|
|
||
|
|
||
| ### ⛱️ 렌더링 최적화 | ||
| - <h4>불필요한 코드 제거</h4> | ||
| <h5>사용하지 않는 import나 로직 삭제</h5> | ||
| - <h4>default import 사용하기</h4> | ||
| - <h4>useCallback</h4> | ||
| <h5>React 컴포넌트가 한 화면에 렌더링 되는게 많을수록 최종 렌더링 시간이 길다</h5> | ||
| <h5>컴포넌트가 렌더링 될 때 마다 function은 재할당이 되기 때문에 useEffect(..., [callback]) 에서 사용한 callback은 항상 변경되고, useEffect는 callback이 변경되었기 때문에 다시 실행된다. 이런 경우를 막기위해 useCallback을 사용</h5> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| pnpm-debug.log* | ||
| lerna-debug.log* | ||
|
|
||
| node_modules | ||
| dist | ||
| dist-ssr | ||
| *.local | ||
|
|
||
| # Editor directories and files | ||
| .vscode/* | ||
| !.vscode/extensions.json | ||
| .idea | ||
| .DS_Store | ||
| *.suo | ||
| *.ntvs* | ||
| *.njsproj | ||
| *.sln | ||
| *.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # React + Vite | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
|
||
| Currently, two official plugins are available: | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
There was a problem hiding this comment. 하하 나도 이거 항상 까먹어 나도 이거 리팩토링 해야돼 킄킄.."KO..." |
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Vite + React</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.jsx"></script> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이것도 gitignore에 추가해줘도 될 것 같아요~!