[react] 모듈화

리액트는 싱글페이지로 화면 개발합니다. App.js 내부에 컴포넌트들을 렌더링하기 때문에 현재 모든 컴포넌트들을 한페이지에 작성해뒀는데요.

그러면 코드가 너무 길고 가독성이 떨어지죠 😥

이럴 때 컴포넌트마다 다른 페이지로 빼려면 어떻게 해야할까요?

모듈화

src 폴더 내 컴포넌트 자바스크립트 파일을 컴포넌트와 같은 이름으로 지어줍니다.

해당 파일에 import React from ‘react’ 상단에 입력하고 컴포넌트를 작성 후 맨 아래 코드를 입력해 export해줍니다.

export default 함수명;

그다음 App.js에서 다음과 같이 import 해준 컴포넌트를

 import 함수명 from '파일경로';

지정 함수명 태그 로 App 컴포넌트 내부 return() 안에서 사용해주시면 됩니다.

만약 특정 링크에 따라 컴포넌트를 달리 보여주고 싶다면 라우팅을 해야 하는데

그건 라우팅 게시글을 확인해주세요! 😎