React 03. Component

이번에는 간단하게 컴포넌트를 하나 만들어보려고 한다.
만들기에 앞서 react에는 함수기반 그리고 클래스 기반으로 코드를 작성해 나가는데 나는 여기서 함수 기반으로 코드를 작성했다.

많은 유투브에서 함수기반을 사용하기도 했고 둘 다 조금씩 접해보니 함수 기반이 뭔가 더 깔끔하고 이해하기 쉬웠기 때문에 함수 기반으로 쭉 나가기로 결정했다.

4. Component 만들기

일단은 src안에 components 폴더를 만들었고 그 안에 Book.js 파일을 하나 만들어줬다.

이제 Book.js 저 파일이 하나의 컴포넌트가 되는 것이다.

Book.js의 코드는 이렇게 간단하게 작성해준다.
이때, 함수는 return 할때 하나의 div만을 return할 수 있다.
무슨 말이나면

//이렇게는 안됨!!
return ( 
  <div>
    <h1>hi</h1>
  </div>
  <div>
    <h1>hi</h1>
  </div>
)

이렇게는 리턴을 할 수 없다는 것이다.

//이렇게는 안됨!!
return ( 
  <div>
    <div>
      <h1>hi</h1>
    </div>
    <div>
      <h1>hi</h1>
    </div>
  </div>
)

항상 이렇게 최상위 div로 감싸서 하나로 만들어 넘겨줘야한다.
(이에 관해서 React.Fragment가 있는데 유익한 내용이니 궁금하면 찾아보길!)

아무튼 위와 같이 Book.js에 코드를 작성하면 하나의 컴포넌트는 이미 만든 것이다. 이제 이 만든 컴포넌트를 App.js에 가져가서 사용해 볼 것이다.

이전에 썻던 Hello World는 지우고
Book.js에서 작성했던 Book 함수를 먼저 import 해준다(2 line)
그리고 7번 라인에서 같은 이름으로 작성하여 사용해준다.

그러면
브라우저 화면에 이렇게 잘 컴포넌트가 등장한다.

컴포넌트를 만들 때는 한 파일 내에 작성하여 사용할 수 도 있지만, 최대한 분리해주는 것이 관리하기 편하다.
그래서 컴포넌트를 항상 분리해서 작성해주고 App.js에 가져와서 사용할 것이다.

그리고 나는 Book Component만 띄웠지만,
return할 때 최상위 div만 해주고 안에 다양하게 원하는대로 코드를 작성해주면 된다.