React 구성요소는 어떻게 만들까

React 구성요소에는 클래스 구성 요소 만들기,함수 구성 요소 만들기가 있는데 먼저 클래스 구성요소를 만들기 위해서는

구성요소의 이름을 대문자로 시작하고 구성요소에 extend React.Component 문을 포함하여 React.Component에 대한 상속을 만든다. 이 과정은 React.Component 함수에 대한 엑세스 권한을 부여 하는 것이다.

render()메서드의 사용도 잊지 말도록 하자. render()메서드를 사용함으로 메서드는 HTML을 반환한다.

 

아래의 코드는 React에서 클래스 구성요소를 만드는 예제이다.

class Apple extends React.Component {
render() {
return <h3> hello,apple!!</h3>;
}
}

React에서는 apple구성요소가 있는거로 받아드리고 그 요소를 반환한다.

응용 프로그램에서 이 구성요소를 사용하려면 일반적인 HTML과 비슷한 구문을 사용하면 된다.

 

 

두번째로 함수 구성 요소를 만들기위해서는 HTML을 반환하면서 클래스 구성요소와 거의 같은 방식으로 작동하지만 

클래스 구성요소보다 몇가지 추가 기능을 가져야한다.

function Apple() {
return <h2>Hi,apple!!</h2>;
}

React 응용 프로그램에 apple구성요소가 있고 apple구성요소를 일반 HTML로 참조한다.

 

 

##구성 요소 생성자 constructor()##

생성자 함수는 구성요소의 속성을 시작하는 곳이며 React에서 컴포넌트 속성은 호출 된 객체에 보관되어야 한다.

이러한 기능을 state키워드로 설명 할 수 있다.그리고 생성자함수는 super()메서드를 통해 부모 구성요소의 생성자 함수를 실행하는 문을 포함하여 부모 구성요소의 상속을 받으며 구성요소는 부모 구성 요소의 모든 함수에 엑세스 할 수 있다.

class Apple extends Reacct.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h3> hello,Apple!</h3>
}
}

위 예제는 render()함수가 color속성을 사용하고 있음을 보여주고 생성자를 생성하며 부모구성요소의 상속을 받는 대표적인 예시구문이다.

 

이제 파일의 구성요소를 만들어 보도록 하자.

React는 코드 재사용에 관한 것이므로 일부 구성요소를 별도의 파일에 삽입한다.

방법은 js파일 확장명을 가진 새 파일을 만들고 그 안에 코드를 넣는것인데 

주의해야 할 사항은 코드의 끝 문장이 export default Car로 끝나야 한다는 것이다.

 

이전파일을 가져와 React를 사용 해 보도록 하자.

import React from 'react';
import ReactDOM from 'react-dom';

class Apple extends React.Component {
render() {
return <h3>hello,Apple!<.h3>
}
}

export default Apple;

 

응용 프로그램에서 이제 이파일을 가져와 여기에 만든 것처럼 Apple 구성요소를 사용 할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import Apple from './App.js';
ReactDOM.render(<Car />,document.getElementById('root'));