0:00 component 문법
4:41 server component vs client component
8:47 import export 문법
오늘의 숙제 :
하단 참고
컴포넌트 만들기
방금 만든 html 레이아웃이 더러워보이는군요.
길고 복잡한 html을 한 단어로 이쁘게 축약하면 얼마나 이쁘겠습니까
실은 컴포넌트 문법을 쓰면 길고 복잡한 html들을 <어쩌구> 이런 단어 하나로 축약할 수 있습니다.
export default function Cart() {
return (
<div>
<h4>Cart</h4>
<작명></작명>
<작명></작명>
</div>
)
}
function 작명(){
return(
<div className="cart-item">
<p>상품명</p>
<p>$40</p>
<p>1개</p>
</div>
)
} 1. 컴포넌트 만들고 싶으면 우선 function을 만들고 작명합니다. 관습적으로 영어 대문자로 시작합니다.
2. function의 return ( ) 안에 축약할 길고 더러운 html을 담습니다.
3. 원하는 곳에서 <작명/> 을 사용합니다.
그럼 그 자리에 return( ) 안에 있던 html들이 붙여넣어집니다.
그래서 길고 복잡한 html을 한 단어로 축약해서 사용하고 싶으면 컴포넌트 문법을 사용하도록 합시다.
실은 page.js 마다 넣는 function 문법도 잘 보면 컴포넌트입니다.
page.js에는 무조건 컴포넌트 1개 넣게 되어있음
server component vs client component
page.js, layout.js에 대충 만드는 컴포넌트들은 전부 server component 입니다.
장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름
단점 : html 안에 자바스크립트를 못 넣습니다. useState, useEffect, onClick 이런거 사용불가능합니다.
컴포넌트 만들 때 페이지 맨 위에 'use client' 라는 코드를 넣으면
그 밑에 있는 모든 컴포넌트는 client component가 됩니다.
장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능
단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려질 수 있습니다.
특히 client component를 로드하려면 hydration이라는 과정을 거치게 되는데
html을 로드하고나서 거기에 리액트 문법을 적용하기 위해
컴퓨터가 html을 읽고 분석하는 과정이 필요한데 그걸 hydration이라고 부릅니다.
그거 때문에 페이지 로드속도가 더 느려집니다.
그래서 큰 페이지들은 보통 server component로 만들고
자바스크립트 기능이 필요한 특정 부분은 client component로 만들어서 넣는게 좋은 습관입니다.
성능 그딴거 필요없고 귀찮으면 그냥 client component 많이 쓰십시오
import / export 문법
하나의 파일에 코드길게 작성하기 싫으면
다른 파일에 작성해놓고 가져오면 됩니다.
그러려면 import export 문법을 사용합시다.
(data.js)
let age = 20;
export default age;아무데나 파일 하나 만들어봅시다.
이 파일에 있는 변수나 함수를 다른 파일에서 사용하고 싶으면
export default 변수함수명 쓰면 됩니다.
내보낸다는 뜻의 문법인데 내보내야 다른 파일에서 쓸 수 있음
(page.js)
import 작명 from './data.js'
console.log(작명)다른 파일에서 export default 했던걸 가져다가 쓰고 싶으면
import 작명 from 파일경로 쓰면 됩니다.
./ 기호는 현재경로라는 뜻이라 같은 폴더안에 있으면 ./파일명만 적으면 됩니다.
(data.js)
let age = 20;
let name = 'kim';
export { age, name }여러 변수나 함수를 export 하고 싶으면 export { 변수1, 변수2 } 합시다.
(page.js)
import {변수1, 변수2} from './data.js'
console.log(변수1)다른 파일에서 export { } 했던걸 가져다가 쓰고 싶으면
import {변수1, 변수2} from 파일경로 쓰면 됩니다.
export { } 해놓은 것들은 import 할 때 작명하면 안되고 변수명 그대로 써야합니다.
Q. 온갖 것 다 컴포넌트로 만들어두면 깔끔하고 좋겠네요?
- 컴포넌트만 많으면 더 더러워보일 수 있습니다.
1. 큰 페이지 2. 자주 사용하는 UI 덩어리를 컴포넌트로 만드는게 좋습니다. 함수문법이랑 용도가 거의 똑같음
Q. map 반복문 써도 될 것 같은데요?
- 넴
오늘의 숙제 :
<h1>안녕하세요</h1> 라는 html을 다른 js 파일에 컴포넌트로 만들어놓고
import 해서 /cart 페이지에 집어넣어봅시다.
/cart 페이지 접속하면 '안녕하세요'가 잘 보이면 성공입니다.
-
Add a note