01.5. React Component
React.js 01.5. Component 앞선 01.1/01.2 React JS 특징 및 설치환경 에서 설명했듯이 컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체이며, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 기능을 붙일 수도 있다. 리액트 프로젝트에서 서로 조합이 가능한, 모듈화된 컴포넌트를 사용해 만든다. 01.5.1. 컴포넌트 생성하기 01.5.1.1. 컴포넌트 초기 코드 생성 src 디렉터리 내부에 NewComponent.js 파일 생성 termianl이나 cmd에서 명령어를 이용해 만들어도 되고, VS Code 왼쪽 사이드바에 있는 파일 목록에서 마우스 오른쪽 클릭으로 새파일을 생성해도 된다. import React, { Component } from 'react' ; class NewComponent extends Component { render() { return ( < div > 새로운 컴포넌트 < /div> ); } } export default NewComponent; 01.5.1.2. 모듈 내보내기 및 불러오기 내보내기 export default NewComponent; 불러오기 // App 컴포넌트에서 생성한 NewComponent를 불러와 사용한다. import React, { Component } from 'react' ; import NewComponent from './NewComponent' ; class App extends Component { render() { return ( < NewComponent /> );