리액트 설치
스케폴딩 작업
pnpm create vite learn-react
- 두개 붙이면 옵션을 뜻함
CJS (CommonJS):
CJS는 Node.js와 같은 환경에서 주로 사용되는 모듈 시스템 형식입니다. 이 모듈 시스템은 require() 함수를 사용하여 모듈을 가져오고 module.exports 객체를 사용하여 모듈을 내보냅니다. 예시를 통해 살펴보겠습니다:
MJS (ECMAScript Modules, ES Modules):
MJS는 ECMAScript 6 (ES6) 표준에 도입된 모듈 시스템 형식입니다. 주로 웹 브라우저 및 최신 Node.js 버전에서 지원됩니다. 이 모듈 시스템은 import 문을 사용하여 모듈을 가져오고 export 문을 사용하여 모듈을 내보냅니다. 예시를 살펴보겠습니다:
주요 차이점:
CJS는 동기적으로 모듈을 로딩하고 실행하며, 모듈의 내용이 로드될 때까지 코드 실행이 차단될 수 있습니다.
MJS는 비동기적으로 모듈을 로딩하며, 모듈의 내용이 비동기적으로 로드되기 때문에 차단되지 않습니다.
MJS는 정적인 import 문과 export 문을 사용하여 모듈 관리를 합니다.
CJS와 MJS 간에는 구문 차이와 비동기적 로딩 방식 등의 차이가 있습니다.
Node.js 환경에서는 .mjs 확장자를 사용하여 MJS 모듈을 로드할 수 있습니다. MJS 모듈을 사용하려면 Node.js의 --experimental-modules 플래그를 사용하여 실행환경을 설정해야 합니다.
yamoo react 자료
UI = 컴포넌트 + 컴포넌트
컴포넌트 = 함수 + 마크업(JSX)
여러 개의 인자를 받는 함수를 하나의 인자를 받는 함수들의 연속으로 나타내는 것을 말합니다.
커링은 함수를 재사용하고 조합하는 데 유용하며, 코드의 가독성 과 유지보수성 을 높일 수 있습니다.
커링은 이렇게 함수를 더 작은 단위로 분해하여 조합 가능한 조각으로 만드는 것을 의미합니다. 이를 통해 함수를 재사용하고 조합하여 더 복잡한 동작을 수행할 수 있게 됩니다. 함수형 프로그래밍에서 커링은 고차 함수(higher-order function)와 함께 사용되며, 코드의 유연성과 모듈성을 높이는데 도움을 줍니다.
리액트에서 우리가 행해야할 규칙
- JSX만 사용하세요.
- 컴포넌트 이름은 첫글자가 항상 대문자로
- 그래야 JSX 구문에서 사용 가능하니까
노드 모듈스 파일이 디폴트 값이기 때문에 생략 가능하다
페이지 주요 컨텐츠 -> 안보이는 이유
안에 들어가면 children 값이 되는데 명시를 안해서 안나옴
RootLayout에서 props.children을 써주면 제대로 결과값이 나온다
➕ 화살표 함수는 const 앞에 export default 붙여서 default 설정 못해준다
그래서 컴포넌트를 만들 때는 보통 선언문으로 작성한다.
(화살표 함수로 사용하면 변수라고 나오는 것 때문에도 선언형으로 사용 하는 걸 권장)
