컴포넌트를 기능별로 분리한 다음 렌더링

컴포넌트를 기능별로 분리하는 이유?

이때까지 컴포넌트를 App.js에 정의해 나갔었다. 지금은 컴포넌트의 수가 많지 않으니 App.js에 있는 컴포넌트를 구별하고 읽기에 어렵진 않겠지만, 각기 다른 기능을 가진 컴포넌트가 매우 많아지고 컴포넌트 하나에 들어있는 코드 줄 수가 많아진다면 추후에 컴포넌트를 수정할때 그 컴포넌트가 있는 부분을 찾기 힘들 것이다. 다시말해 유지보수가 힘들어진다는 것이다.

 

폴더를 만들고 각각의 파일로 분리

컴포넌트를 분리하는 방법은 간단하다.

src 폴더에 컴포넌트를 담는 폴더를 만들고 컴포넌트별로 파일을 분리하면 된다.

컴포넌트를 담는 폴더인 components 폴더를 만들었다.

그리고 App.js에 있는 사용자 정의 컴포넌트를 옮길 파일(Webhead.js)을 components 폴더에 만들었다.

생성한 React 프로젝트 > src > components > Webhead.js (함수형 컴포넌트 사용)

function Webhead(props){
	return(
		<div>
			<h1>{props.title}</h1>
			<p>{props.desc}</p>
		</div>
	);
}

export default Webhead;

 

생성한 React 프로젝트 > src > components > Webhead.js (클래스형 컴포넌트 사용)

import React, { Component } from 'react'

class Webhead extends Component{
	render()
	{
		return(
			<div>
				<h1>{this.props.title}</h1>
				<p>{this.props.desc}</p>
			</div>
		);
	}
}

export default Webhead;

 

사용자 정의 컴포넌트를 아까 만든 파일에 정의 하고 App.js 파일에서 컴포넌트를 사용하기 위해서

export default 사용자 정의 컴포넌트; 로 컴포넌트를 내보낸다

생성한 React 프로젝트 > src > App.js ( 파일 상단에 코드 추가 ) 

import Webhead from './components/Webhead.js'

 

그리고 App.js 파일에서는 내보냈던 컴포넌트를 불러오기 위해서 import 사용자 정의 컴포넌트 from '컴포넌트 파일 경로' 코드를 App.js 파일 최상단에 작성한다.

 

정상적으로 렌더링 되는것을 확인할 수 있다.