React Component

 이전 포스팅까지 해서 어떻게 리액트 프로젝트를 만들고 기본 구조에 대해서 기록해봤습니다. 이번 포스팅에서는 Component에 대해서 기록해 볼 겁니다! 저는 이 Component라는 것을 내가 만드는 하나의 태그라고 이해했습니다. 하나의 사용자 지정 태그를 만들어 내는 것이고 기존에 App.js 또한 마찬가지로 하나의 Component라고 생각합니다. 먼저 말씀드리자면 제 react_tutorial은 CRUD(creat, read, update, delete)를 구현하는 것을 목표로 합니다. 그러므로 먼저 read component를 만들어 보겠습니다

src/component/Read.js

 src파일 아래 component라는 폴더를 만들고 안에 Read.js파일을 만들어줍니다.

Read.js

 먼저 import react를 해준뒤 클래스 형태로 Read클래스를 만들어줍니다. 그리고 App과 같이 Component를 상속받아주고 render함수 안에 return문을 만들어줍니다. 안에 간단하게 <ol> 태그를 이용해서 <li> 태그로 테스트를 해봅시다! 이렇게 코드를 쳐준 뒤 마지막에 반드시 export default 클래스 이름을 쳐줘야 합니다. 저장한 뒤 App.js로 넘어갑시다.

Read를 적용한 App클래스

 import 클래스이름 from 파일 경로를 입력해 import를 받아주고 div태그 안에 일반 태그 사용하듯이 <Read></Read>를 입력해주면 완료입니다.

(현재 기존에 있던 App.js에서 return 값은 다 지우고 현재 빈 페이지만 나오는 상태입니다.)

 이제 yarn start를 실행해 볼까요?

Read Component가 보입니다.

 이러한 컴포넌트를 만들어 놓으면 추후에 Read라는 양식을 사용해야 될때 태그를 사용하는 것처럼 사용해주면 하드코딩을 할 필요 없이 생성이 됩니다. 이는 코드의 재사용에 굉장히 도움이 되기에 전체 코드의 가독성을 높여줍니다!