Component 1, function 컴포넌트()

Q. 아래 코드 중 .diary 영역을 function()을 이용하여, 컴포넌트화 해보자.

import './App.scss';

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>
      <div className="diary">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  );
}

export default App;

A. 컴포넌트 function의 첫 문자는 대문자!

1. 먼저 function()을 생성하여, <App>처럼 함수에 컴포넌트를 담는다. 이전글에서 설명했듯이, return() 바로 안에는 한 개 이상의 태그가 들어갈 수 없다. 전체를 감싸는 태그, 하나만 삽입되어야 한다(역시, 만약 의미없는 태그가 늘어나는 것이 싫다면, <></>을 이용할 수 있다)

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

2. 원하는 위치에 <함수명>을 삽입한다.

<Diary></Diary>

<Diary /> <!-- 축약형 -->

---

import './App.scss';

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>
  );
}

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