Next.js 페이지 레이아웃 만들기 (React 기초문법)
리액트 버전 HTML을 JSX라고 함. JSX에는 4가지 특징이 있음.
1. return() 안에 HTML 넣을 때
JSX에서는 최상위 element 하나만 return시킬 수 있다. 즉, 두 개 이상의 HTML 요소를 return시키고 싶을 때에는 상위 component로 감싸야 한다. 이때 최상위 div 태그를 굳이 더 넣고 싶지 않다면 <></> 등의 빈 태그로 감싸도 된다.
2. class 사용하기
return문 안은 js 영역이기 때문에 class 예약어와 겹친다. 때문에 기존 HTML의 class 대신 className을 사용한다.
3. HTML 안에 변수 넣기
리얼 js 코드는 return문 밖에 작성한다.
- return문 바깥에서 JavaScript 변수나 함수를 선언한다.
- return문 안에서 JSX를 반환할 때, 중괄호 {} 를 써서 그 변수를 삽입한다.
- 이를 데이터바인딩이라고 하는데, 이는 태그 내부 뿐만 아니라 태그 속성 값에도 적용 가능하다.
4. 인라인 style 속성 넣기 (Object 자료형 활용)
React에서는 inline 속성 넣는 것이 금지되어 있음. inline으로 style 속성을 넣으려면 중괄호를 두 개 만들고 그 안에 스타일을 넣어야 한다. 단, 이는 js 안의 Object 자료형이기 때문에 기존 css의 font-size 이렇게 하이픈 기호(-)를 쓸 수 없고, fontSize 이렇게 cammelCase로 표현해야 한다.
여러 페이지 만들기(라우팅)
많은 사이트의 경우 URL마다 다른 페이지를 보여주는 형식을 취하고 있음. 이때 URL 만드는 기준은 개발자가 정한다. 이때 URL로 페이지를 나누는 것을 라우팅(Routing)이라고 함.
놀랍게도 Next.js는 자동 라우팅 기능을 탑재하고 있어, 파일이나 폴더 하나 만들면 라우팅을 손쉽게 할 수 있다. 이는 강력한 기능이지만 여기에 따른 트레이드오프로, 폴더와 파일의 수가 많아지면 구조 파악이나 해석이 복잡해질 수도 있다.
Next.js에서 라우팅하기
- app 폴더 안에 새로운 폴더 만들기
- 이때 폴더명은 URL이 됨
- 그 안에 page.js를 만들고 레이아웃 구성하기
- 해당 URL로 접속하면 이 page.js의 페이지가 보여지게 됨
컴포넌트 만들기 개략
- function 컴포넌트명() { } 만들기
- 중괄호 안에 return () 넣고 그 안에 HTML 구성하기
- function 왼쪽에 export default 붙이기
- 이후 페이지에서 import한 뒤, 호출해서 사용하면 됨
a 태그 대신 Link 태그
a 태그와 사용법은 동일하나, 상단에 Link를 import해야 함. (from "next/link")
- 클라이언트 사이드 라우팅(CSR)이기 때문에, 페이지 전환 시 전체 페이지를 새로고침하지 않고, 필요한 컴포넌트만 로드하므로 빠르게 이동 가능
- 기존 상태를 유지한 채로 이동하므로, 기존의 리액트 상태(state)나 캐시된 데이터가 보존됨
- 기본적으로 화면에 보이는 링크를 백그라운드에서 미리 로드하므로, 사용자가 클릭하기 전에 이미 데이터를 받아놔서 전환이 더 빠르다. (프리페치 기능)
<Link href={'/'}>바로가기<Link/>페이지 변경과 상관 없이 계속해서 보여줘야 할 UI는?
layout.js는 page.js를 감싸는 부분이기에 layout.js에 페이지와 상관없이 계속해서 보여줘야 할 UI를 작성하면 모든 페이지에 보인다. 참고로 page.js는 layout.js의 {children}에 들어간다.
이는 동일 폴더에 layout.js가 있으나 없으나 동일하게 적용되는데, 동일 폴더에 layout.js가 없는 경우 상위 폴더에 있는 layout.js로 감싸기 때문이다. 그런데 만약 둘 다 있다면? 동일 폴더의 layout.js를 감싼 것에 또 상위 폴더의 layout.js를 감싼다. 그렇게 최상위 폴더의 layout.js를 계속해서 감싸는 형태.
HTML을 반복문으로 줄이고 싶을 때는 MAP을 사용하자
실제 상품 목록 같은 것을 보여준다면, DB에서 데이터를 받아와 이를 통해 상품들을 보여주게 될 텐데, 이때 각 상품들은 반복적인 HTML 구조를 가지면서 이미지나 상품 정보들만 바뀌는 형태이다. 이러한 반복 작업들을 수행할 때 JSX 상의 for문으로 map을 사용할 수 있다.
array명.map((a, i)=>{
// 이 안의 코드를 반복 실행
})map 함수 안의 ( )에는 파라미터를 2개까지 만들 수 있다. a는 반복 회차마다 해당 회차 번째의 자료형으로 변한다. 다시말해 array[0], array[1]..을 가리킨다. 마찬가지로 i는 반복될 때마다 0부터 1씩 커지는 정수를 의미한다. 그리고 return을 사용할 경우 그 자리에 새로운 array를 만들어 해당 값을 저장한다.
이를 이용해서, 레이아웃 안에 map을 적용해 HTML을 반복적으로 생성할 수 있다. 코드 상에서는 [<HTML코드>, <HTML코드>, <HTML 코드>] 이렇게 남아있게 되지만, JSX에서는 이러한 HTML 또한 정상적으로 렌더링하여 보여준다.
{
상품들.map((상품, i) => {
return (
<div className={styles.food} key={i}>
<h4>{상품} $40</h4>
</div>
)
})
}
Next.js에서 이미지 넣기
React에서는 이미지 태그(<img>)에 대해 여는 태그-닫는 태그 쌍이나, 바로 닫는 태그 하나로 구성해야 한다. 이미지들 같은 경우, 루트 폴더에 public 폴더를 만들어 그 안에 저장해 두고, src 속성에서 "/이미지명.jpg"로 바로 사용할 수 있다.
<img src="/food0.png"/>최적화된 이미지 넣기
Lazy Loading, 사이즈 최적화, Layout Shift(이미지 로딩이 늦어 레이아웃이 밀리는 현상) 방지 등의 기능을 지원하는 최적화된 이미지를 넣을 수도 있다. 이전에 a 태그 대신 Link 태그를 사용한 것처럼, img 태그 대신에 Image 태그를 이용할 수도 있다. 단, 이제는 src에 바로 원본 경로를 넣을 수 없고, 이미지를 import해서 경로를 넣어줘야 한다.
import Image from 'next/image';
import 이미지 from '/public/food0.png';
/* 레이아웃 안에서 */
<Image src={이미지}/>다만 map 안에서 이미지가 계속 바뀌어야 하는 경우나, public 폴더가 아닌 외부 경로에서 이미지를 가져와야 할 경우에는 어려운 점들이 존재한다.
단적으로 외부 경로에서 이미지를 가져와야 한다면, width = {정수}, height = {정수} 속성을 추가로 부여하고, 루트 디렉터리의 next.config.js 에서 이미지를 가져올 외부 경로에 대한 명시 또한 필요해진다. 때문에, 이미지 최적화 등의 최적화 등은 구현이 완료된 뒤 적용하는 것이 좋다. (처음에는 img 태그를 사용하여 구현)
참고자료
코딩애플 온라인 강의 <Next.js로 웹서비스 만들기>
'크래프톤 정글 > Equipped in 정글(나만무)' 카테고리의 다른 글
| [나만무] 06.15 TIL - Next.js 학습 by 코딩애플 (0) | 2025.06.15 |
|---|---|
| [나만무] 06.14 TIL - Next.js 학습 by 코딩애플 (0) | 2025.06.14 |
| [나만무] Next.js 설치 및 개발환경 설정하기 (by 코딩애플) (0) | 2025.06.13 |
| [나만무] Next.js를 선택하게 된 이유 (1) | 2025.06.13 |
| [나만무] 나만무 프로젝트에서 무엇을 얻어가야 할까? (+ 정글 선배님의 조언) (3) | 2025.06.13 |