[React / Next.js] 페이지 UI 생성하기

---

환경

• OS: macOS
• IDE: vs code
• node: v20.6.0

---

1. UI 생성하기

react-next에서 src/app 밑에 폴더 생성후 page.jsx(page.tsx)를 통해서 라우팅이 가능했다.

하지만 바로 page.jsx에서 페이지를 생성하게 되면 react의 state를 사용하지 못한다.

useState등의 react state는 client에서만 사용이 가능하다. page.jsx는 일반적으로 next.js의 서버에 해당된다.

따라서 아래처럼 'use client' 키워드를 이용해야 한다.

 

LoginClient.jsx

'use client'
import React, { useState } from 'react'

const LoginClient = () => {

  const [email, setEmail] = useState('');

  return (
    <div> Login </div>
  )
}

export default LoginClient;

같은 폴더내에 LoginClient라는 별도의 파일을 만들어서 사용해주고, page.jsx에서 이 컴포넌트를 import해서 사용해준다.

 

page.jsx

import React from 'react'
import LoginClient from './LoginClient'

const Login = () => {
  return (
    <LoginClient />
  )
}

export default Login

 

정리

react-next에서 UI를 작성할 때에는 'use client' 파일을 별도로 분리하고 page에서 컴포넌트로 가져다 쓰면 된다.