NEXTJS 로 twitter클론 해보기(2)

21928 단어 ReactnsxtjsReact

  1. AppLayout 만들기

    • components폴더 만들기

      • AppLayout.js

      • next에선 Link href를 통해 페이지를 이동할 수 있다.

        import PropTypes from "prop-types";
import Link from "next/link";
import { Menu } from "antd";

const AppLayout = ({ children }) => {
  return (
    <div>
      <Menu mode="horizontal">
        <Menu.Item>
          <Link href="/">
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/profile">
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/signup">
            <a>회원가입</a>
          </Link>
        </Menu.Item>
      </Menu>
      {children}
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

  2. 해당 AppLayout을 통해 Layout을 할 수 있다.

    • 으로 감싸준 부분이 children으로 들어간다.
    import AppLayout from "../components/AppLayout";

const Home = () => {
  return (
    <>
      <AppLayout>
        <div>index</div>
      </AppLayout>
    </>
  );
};

export default Home;

  3. pages의 공통 부분을 layout하는법

    • pages폴더아래에 _app.js파일을 만든다.
    • Component부분에 우리가 만든 Component가 들어간다.
    • Component에서 App을 import안해줘도 자동적으로 된다. (next가 알아서 해줌)
    • next에서 head를 고칠려면 import Head from "next/head"를 해줘서 Head를 사용해 고쳐야 한다.
    import PropTypes from "prop-types";
import Head from "next/head";
import "antd/dist/antd.css";
const App = ({ Component }) => {
  // pages의 공통 부분
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
      </Head>
      <Component />
    </>
  );
};

App.PropTypes = {
  Component: PropTypes.elementType.isRequired,
};
export default App;

  4. antd - grid

    • 24칸으로 쪼개짐
    • xs={24} → 화면이 작을때 각각이 24칸씩
      • 100%차지한다는말
    • md={12} → 화면이 중간쯤 크기일때 12칸 차지
      • 50%차지한다는 말
    import PropTypes from "prop-types";
import Link from "next/link";
import { Menu, Input, Row, Col } from "antd";
import { useState } from "react";
import UserProfile from "./UserProfile";
import LoginForm from "./LoginForm";

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggendIn] = useState(false);
  return (
    <div>
      ...Menu
      <Row gutter={8}>{/*gap과 같다.*/}
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
				 {/*_blank을쓸때 rel="noreferer noopener"을 써줘야 보안상 좋다.*/}
          <a
            href="https://velog.io/@abc5259"
            target="_blank"
            rel="noreferer noopener"  
          >
            Made By LeeJaeHoon
          </a>
        </Col>
      </Row>
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;
JAVA - 03. 상수와 형변환
SWEA1265.달란트2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage