[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] state와 props - 컴포넌트 파일로 분리

App.js 파일에 너무 많은 수의 컴포넌트가 존재하면 작업이 불편해질 뿐 아니라 코드도 더러워진다.

다른 객체지향언어에서 객체들을 파일로 관리하는 것 처럼 컴포넌트도 파일로 관리할 수 있다.

 

우선 src 디렉토리에 components 파일을 생성해서 컴포넌트 수만큼 js 파일을 생성한다.

 

이제 각 js 파일에 컴포넌트들을 옮겨준다.

이전 포스트에서 만든 리액트앱을 그대로 사용해서 컴포넌트들을 옮겨봤다.

subject.js

content.js

toc.js

 

이렇게 옮겨진 컴포넌트들을 외부에서 사용할 수 있도록 "export default '컴포넌트 이름'" 코드를 마지막에 작성해야 한다.

이제 App.js 파일에서 컴포넌트 파일에 있는 컴포넌트들을 사용하면 된다.

App.js

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387396

웹 프론트엔드 시작하기 (리액트&리덕스)