Javascript와 아이들/React

[스터디] Describing the UI - 1

whale3 2023. 5. 15. 09:04

챕터 https://react.dev/learn/your-first-component

챕터 https://react.dev/learn/importing-and-exporting-components

 

포인트1. 

https://react.dev/learn/importing-and-exporting-components#the-root-component-file

These currently live in a root component file, named App.js in this example. In Create React App, your app lives in
src/App.js. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.

폴더 구조 예:

https://github.com/vercel/next.js/tree/canary/examples/redirects

 

 

포인트2. 

https://react.dev/learn/importing-and-exporting-components#default-vs-named-exports

저번 클로저도 그렇고 이런 개념들을 한번 더 짚고 넘어가줘서 좋음. 이번 문서의 마음에 드는 점. 

 

default export는 컴포넌트 .. 

named export는 유틸 함수 같은거. dateUtils.ts 이렇게 해놓고 이 안에 날짜 관련 함수들 다 때려놓고 export함

예) import { convertDateToYYYYMMDD, convertTimeToString } from './dateUtils.ts'

 

 

챕터 https://react.dev/learn/writing-markup-with-jsx

 

챕터 https://react.dev/learn/javascript-in-jsx-with-curly-braces

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

읽을 차례

https://react.dev/learn/importing-and-exporting-components

반응형