Next.js
JSX 에서 길게 적어진 html을 컴포넌트 화 시키자
여기서 생각이 조금 들었는데 기존 React로 작성할 때는 컴포넌트를 거의 화살표 함수로 많이 사용 했는데 Next.js를 공부하는 지금 함수 선언식을 더 많이 사용하는 것 같다.
왜그럴까? 생각해서 찾아봤는데 딱히 막 구체적인 이유를 찾긴 힘들었고 대부분
1.함수형 컴포넌트에서 jsx 를 리턴하는 default export 함수는 함수선언문으로 정의한다.
2.그 외 함수들은 화살표 함수를 사용한다.
이렇게 사용하고 있는 것 같다.
component 만들기
funcion 이름() { return (JSX) } 식으로 만들어보자
이때 component화 하니 뭔가 깔끔해 졌다고 해서 눈에 보이는 거 전부 다 component화 할까? 생각하진 말자
component 단점 : component끼리 데이터 공유가 손이 많이 감
그러니 재사용이 잦은 html덩어리들을 주로 component로 만드는 게 좋음!
근데 사실상 여기를 보면 React 할 때랑 별 다를바 없긴 하다.
Next.js에는 컴포넌트 종류가 2개 있는데 서버와 클라이언트 컴포넌트이다.
- server component
- 아무곳에서 컴포넌트를 만들경우 자동적으로 된다.
- client component
- 최상단에 'use client' 적고 만든 경우 그 아래에 적힌 모든 컴포넌트는 client component가 된다.
그럼 차이가 뭘까?
- sever component
- 자바스크립트 기능이 없기 때문에 페이지 로드가 매우 빠르다
- 검색엔진 노출도 이점이 좀 있다
- JSX로 적은 html에 자바스크립트 기능넣기 불가능 EX) 태그에 onClick 같은 걸 넣으면 에러 남
- 상단 변수 지정 같은 건 상관없지만 useState, useEffect 등도 사용 불가
- client component
- 로딩 속도가 느림(자바스크립트가 많이 필요하기 때문 , hydration 필요)
- hydration은?? => html 유저에게 보낸 후 자바스크립트로 html 다시 읽고 분석하는 일
- 상단에 적은 useState부터 자바스크립트 기능 다 가능
큰 페이지들은 server component로 작성하고 js기능이 필요한 곳만 client component로 만들자
props
쉽게 말함녀 함수의 파라미터와 똑같다.
문법
<자식component 작명="전할데이터" />- 자식은 props.작명 사용
- 이부분은 자식 component에서 비구조화 할당을 통해 {작명}으로도 받을 수 있다.
- 부모가 자식한테 가능해도 자식이 부모에게 전송은 불가능 하다
- 부모 자식이 아닌 상관 없는 컴포넌트 간에도 전송은 불가능 하다
- 그래서 데이터가 많은 컴포넌트에서 필요하다면 최 상단 부모 컴포넌트를 활용하면 좋다.
DB를 통해 보통 데이터를 가져오는데 fetch,axios등을 사용해서 말이다. 이때 같은 데이터 요청이 여러개면 1개로 압축해준다.(deduplication기능)
아직 배우고 있는 곳이 React를 사용할 때와 매우 똑같아서 크게 달라진 점은 server 컴포넌트와 client 컴포넌트를 구분시키며 라우터를 쉽게 사용한다 정도 인 것 같다.
