[Next.js] 페이지 레이아웃 만들기(React 기초 문법)

nextjs 프로젝트를 시작할텐데 먼저 페이지 레이아웃을 만들어보겠음.

 

일단 nextjs는 react 프레임워크 문법을 사용해야 한다.

nextjs는 react에 얹혀사는 프레임워크임.

 

 

 

리액트에서 사용하는 HTML(JSX 라고 한다)은 4가지 특징이 있다

1. return() 안에 HTML을 집어 넣을때는 병렬구조로 div를 만들 수 없음 가장 바깥쪽에 가장 큰 div로 감싸야 함

div 병렬구조는 에러발생

가장 바깥에 div태그로 감싸면 해결

 

2. style 집어 넣을때는 class 속성으로 CSS에서 사용할텐데 className 속성을 사용해야 함

이유는 html파일이 아닌 js파일이기 때문에 class라는 문법과 겹치지 않기 위해서이다.

우선 메인페이지 레이아웃을 간단히 만들어보겠음.

className속성과 CSS

 

렌더링된 화면

 

 

3. HTML 안에 변수를 집어넣으려면 {} 사용해야 한다. (데이터 바인딩)

name 변수를 JSX에서 사용하고 싶으면 {} 중괄호 문법

데이터 바인딩 됨

 

name 변수를 JSX에서 데이터 바인딩해서 사용하고 싶으면 {} 안에 변수명을 집어넣으면 된다.

 

참고로 {} 문법은 href 속성이던 className 속성이던 id 속성이던 src 속성이던 온갖 속성에도 다 사용 가능함.

href 속성에 {} 문법 사용

 

 

4. style 속성을 넣으려면 {{ ... }} 형식으로 작성한다.

 

이렇게 style 속성의 "" 안에 작성하면 에러 발생한다.

(html에서 사용 가능한 방법임)

 

JSX에서는 style={{ ... }} 이런 형태로 작성해줘야 한다.

style={{ ... }} 형태로 작성해야 하고 콤마로 여러 속성을 부여 가능함

style 속성 적용 잘 된 모습