Component 2, 파일 분리 (모듈화)

Component 1, function 컴포넌트()

위 글에서 컴포넌트 <Diary />를 새파일로 분리 해보자.

 

1. 파일 생성, 컴포넌트.js

일반적으로 파일명은 컴포넌트명과 동일하게 주어지고, 역시 동일하게 첫문자는 대문자로 작성한다(Diary.js).

 

2. function Diary(){} 를 삽입하고 리액트 기본 설정 값을 추가

import React from "react"

function Diary(){
    return(
        <div className="diary">
            <h2>제목</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

3. 다른 곳에서 사용할 수 있도록 최하단에 export 선언

export / import를 잘 모를 경우 아래 링크 참조!

2021.10.30 - [react - 정리중/basic] - 내보내기 export /가져오기 import

export default Diary;

4. 컴포넌트 <Diary />를 사용할 곳에 import 선언

import Diary from './Diary';

5. 컴포넌트 <Diary /> 삽입

<Diary />

---

 

1. Diary.js

import React from "react"

function Diary(){
    return(
        <div className="diary">
            <h2>제목</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

export default Diary;

2. App.js

import './App.scss';
import Diary from './Diary';

function App() {
  let title = 'Blog';
  function thisYear(){
    let now = new Date();
    return now.getFullYear();
  }

  return (
    <div className="App">
      <header>
        <h1 className="nav">
          { title }
          { thisYear() } 
        </h1>
      </header>
      <Diary />
    </div>
  );
}


export default App;