리액트 Component 사용하기

Component(컴포넌트): 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말합니다. 

Component를 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용할 수 있습니다. 

( 따라서 유지보수하기에 유리하겠죠 ? )

 

파일구조

 

예시로 src 폴더에 ImportComponent.js 파일을 생성한 후 다음과 같이 입력합니다. 

첫 번째 줄에서 임포트한 컴포넌트를 상속받아 ImportComponent클래스에서 사용한다.

return 된 html 코드를 render() 함수를 사용해 화면에 표시한다. 

 

 

 

 

컴포넌트를 사용하기 위해선 ? 

 

App.js 파일과 같은 경로에 위치한 ImportComponent.js 파일을 임포트 한 후 , 컴포넌트 명을 태그와 함께 사용하면 된다 . 

render() 함수에서 읽어 들였던 <h2> 코드가 이식된다.

 

결과는....

정말 잘 이식되었다 !