Q. Next.js, React.js

저거슨 2019. 01. 18.

제가 처음에 create-app-react였나 그걸로 공부를 시작했다가 next.js를 해보고있는데요

코드에서 import React from 'react'; 를 할 필요 없습니다. 함수형 컴포넌트가 아닌 클래스 형 컴포넌트도 동일한데요, 만약에 여러분들이 class Index extends Component 와 같은 형식으로 하는걸 선호한다면, import { Component } from 'react'; 는 선언 해주어야합니다. 혹은 class Index extends React.Component 로 작성해도 되겠구요.

위글을 보시면 next.js를 알려준곳에선 

import Link from 'next/link';
import Head from 'next/head';
import Layout from '../components/Layout';

const Index = () => (
  <Layout>
    <Head>
      <title>Index 페이지</title>
    </Head>
    <h1>안녕, Next.js</h1>
    <h2>
      <Link href="/about">
        <a style={{ background: 'black', color: 'white' }}>소개</a>
      </Link>
    </h2>
  </Layout>
);

export default Index;

이런식의 코딩을 하고

create-app-react에서는

import React, { Component } from 'react';
import Test2 from './Test2';

class App extends Component {
  render() {
    const a = 1;
    return (
      <div>
        {' '}
        {0 + a === 1 ? <Test2 /> : <div> cc </div>}
        <div />
      </div>
    );
  }
}

export default App;

이런식으로 알려주더라구요

어떤게 더 좋을지 next.js에서 사용할땐 위에서 보여준 부분처럼 사용하는게 좋은지 궁금합니다.

#웹
공유하고 보상받기 ♥︎
댓글 0

2개의 답변이 있습니다.

질문자 & 큐레이터 채택
비매스터 답변자인증
OpenSG 수석 컨설턴트 2019. 01. 18
83%의 채택

React Component 를 만드는 방법에는 두가지가 있습니다.

  • 함수형 컴포넌트(Functional Component)

  • 클래스형 컴포넌트(Class Component)

올려주신 코드중 첫번째는 함수형 컴포넌트입니다. 두번째가 클래스형 컴포넌트입니다. 둘다 React Component 이므로 안심(?)하셔도 됩니다. Next.js도 Class Component, Functional Component 둘다 사용가능합니다.

다만 React에서와는 다른 몇몇 속성, 메서드가 Next.js에서 사용되고 이벤트 생명주기가 조금 차이가 있을 뿐입니다.

댓글 0
zerocho 답변자인증
Node.js 교과서 저자 2019. 01. 18
17%의 채택

Next.js는 React 기반 프레임워크입니다.

Express가 Node 기반 프레임워크인것처럼요.

Express에서도 Node의 API를 쓸 수 있듯, Next에서 React 방식을 쓸 수 있는 것도 당연한 겁니다.

하지만 웬만하면 Next는 Next방식을 따르는 게 좋습니다. 괜히 섞어서 썼다간 스파게티 코드가 되기 십상입니다.

댓글 0