[React] component 생성

1. React component 만들기 : 정리 정돈의 도구

 예를 들어, 아래와 같은 HTML 코드가 있을 때 이를 React 코딩을 통해서 component로 어떻게 만들어 볼 수 있을까?

간단한 HTML 코드

 먼저 src 디렉토리 안에 있는 App.js를 실행시키고, 그 코드를 수정해주면 된다.

App.js 안에서 아래의 형식에 맞게 코드를 작성하면 된다.
여기서 눈여겨봐야 할 것이 있는데, 최상위 태그이다.
React에서 컴포턴트를 만들 때, 그 컴포넌트는 반드시 하나의 최상위 태그로 구성되어야 한다.

컴포턴트 만드는 형식

위의 형식을 바탕으로 HTML 코드를 컴포넌트로 바꾸어 보면, 아래와 같이 코드를 작성할 수 있다.

header 부분의 component

nav 부분의 component

article 부분의 component

이렇게 작성한 컴포넌트를 App class 안에 넣어주면 된다.

작성한 component들을 넣은 코드

실행 결과 아래와 같이 정상적으로 잘 만들어진 것을 볼 수 있다.
React의 component를 통해서 코드를 보다 깔끔하게 정리할 수 있는 기능을 할 수 있게 된 것이다.

상단의 코드들을 이용해서 만든 페이지