[Next.js] client / server component, import 문법

컴포넌트라는 문법을 알아보겠다.

 

먼저 장바구니 페이지로 이동하고 HTML을 좀 확인해보자.

cart/page.js

 

보기에 뭔가 좀 복잡하다.

보기 깔끔하게 map()함수를 사용하면 좋을 것 같다.

그런데 HTML을 깔끔하게 만들 수 있는 방법이 한가지 더 있는데

그것은 바로 <컴포넌트/> 하는 방법이다.

 

컴포넌트를 사용하면 길고 복잡한 html을 한 단어로 축약해서 사용 가능하다.

 

이 컴포넌트를 만들고 싶으면 전에 포스팅 했던 글을 참고하자.

https://motorhead.tistory.com/38

[React] 많은 div들을 하나로 줄이고 싶으면 컴포넌트로

 

CartItem 컴포넌트를 만들어 사용

렌더링

 

 

참고로 만약 보여줄 상품 목록이 엄청나게 많다면

컴포넌트도 많이 만들어야 할 것이다.

그럴땐 컴포넌트도 map()함수로 반복생성하면 될 것이다.

 

그런데 모든 코드를 컴포넌트화 해서 사용하면 좋지 않을까라는 의문이 생길 수 있는데

그런경우엔 단점으로

컴포넌트끼리 데이터 공유하고 변수를 공유하고 하기 힘들다.

(props 문법등으로 공유해야해서 코드가 복잡해짐)

 

그렇기 때문에 재사용이 잦은 HTML 덩어리들을 component로 만드는게 좋다.

component 문법도 function 문법과 동일하기 때문에 function 문법을 사용하는 이유와 같다.

Next.js에서의 component 문법은 추가로 page.js를 만들 때 컴포넌트로 만들어 사용한다.

 

 

참고로 Next.js 컴포넌트는 종류가 2가지이다.

1. server component

2. client component

 

Next.js에선 이 두가지 컴포넌트를 각각 만들어 사용 가능하다

 

사용 방법으론 위에 CartItem 컴포넌트처럼 아무곳에나 만든 컴포넌트는

server component가 된다.

 

그런데 .js파일 맨 위에

'use client' 라고 작성해주면

밑에 있는 코드들은 모두 client component가 된다.

최상단에 'use client'

 

자 그럼 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 알아야 할텐데

 

일단 서버 컴포넌트에서는 HTML에 자바스크립트 기능을 넣을 수가 없다.

(ex. onClick 속성 같은것을 사용하지 못함, useState, useEffect 등 사용 불가)

 

반면 클라이언트 컴포넌트에서는 HTML에 자바스크립트 기능 사용 가능하다.

(useEffect, useState, onClick 등 사용 가능)

 

그러면 client component가 좋은것이니 모든 컴포넌트를 client component로 만들어 사용하면 좋겠다는

생각을 할 수가 있는데 맞는 말이다. 훨씬 더 개발이 편함

 

하지만 server component도 장점이 있으니 있는거 아닐까

장점으론 로딩속도가 매우 빠르다.

왜냐하면 페이지를 로드 시 JS 기능이 별로 필요 없기 때문에 페이지 로드에 필요한 JS 코드 양이 적다.

그리고 검색엔진 노출에 유리하다.

 

반면에 client component는 로딩속도가 느리다 (JS 많이 필요, hydration 필요)

* hydration이란 유저에게 HTML을 보낸 후에 JS로 HTML을 다시 읽고 리액트로 분석하는 일이다.

 

 

 

그래서 추천하는 방식은

큰 페이지는 server component로 만드는게 좋고

큰 페이지 안에서 기능들이 필요한 부분들(ex. 장바구니 갯수 추가 버튼 등..)만 client component로 만들어 사용하는 것이다.

 

그러면 JS 양도 줄일 수 있고 로딩 속도도 증가시킬 수 있다.

이것이 좋은 관습임.

 

 

추가로 지금 하나의 파일에 코드를 길게 짜고 있는데

이러면 나중에 보기가 조금 힘들어질 수 있다.

이런 경우엔 일부 코드를 다른 파일로 분할을 하기도 하는데

(다른 파일에 코드를 만들어두고 그 파일을 가져와 사용한다)

이 방법으로 한번 코드를 수정해 보겠다.

 

먼저 cart 폴더에 data.js 라는 파일을 만든다.

그리고 그 파일에 데이터나 변수, 함수등을 정의한다.

그리고 page.js에서 가져와 사용할 것이다.

data.js에서 변수 생성 후 export default 해준다.

사용할 곳에서 import 해주면 된다.

 

이렇게 import해서 사용하면 되는데 import시 js 파일이나 CSS파일같은 경우 ./로 시작하는게 좋다.

(현재 경로라는 뜻임 data.js 파일이같은 경로에 있으니까)

하지만 상위 경로에 있다면 ./../하면 된다.

(상위 폴더로 이동해 주세요 하는 의미임)

 

하위 폴더로 이동하고 싶다면

'./하위폴더명/data.js' 이런식으로 작성하면 된다.

JSX에서 {data} 해주면 사용된다.

data 사용된 화면

 

근데 export default의 단점이 있는데

2개 3개 사용이 불가능하다.

 

그래서 여러가지 변수를 동시에 export 하고싶다면

export {변수1, 변수2, 변수3}; 이런식으로 작성하면 된다.

하지만 중괄호를 사용하면 import 시에도 중괄호를 사용해야하고 마음대로 작명도 불가능함

export 할때 중괄호 안에 사용한 이름 그대로 사용해야됨

그리고 class, 함수, 컴포넌트 모두 export 해서 사용할 수 있기 때문에

한번 포스팅으로 해보자.

(참고로 전에 포스팅 했던 export, import 글을 참고하자)

https://motorhead.tistory.com/53

[React] 코드가 길어지면 import / export