[React] 컴포넌트(Component)에 대해 알아보기

React의 컴포넌트(Component)

• 재사용이 쉽다. 
• 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있으며, 둘 다 동일한 역할을 하지만 조금씩 차이가 나는 부분이 있다.

우선, 컴포넌트로 데이터를 주고 받을 때 사용하는 Props와 State에 대해 알아야 한다.

• Props : 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값
• State : 컴포넌트 내부에서 선언하고 내부에서만 변경 가능한 값

1. 함수형 컴포넌트

import React from 'react';

function Body(props) {
	return <div>Hello, {props.name}</div>;
}

export default Body;

props를 받아서 그 안에 들어있는 name값을 꺼내서 썼다. 매개 변수가 없는 함수형 컴포넌트도 만들 수 있다.

함수형 컴포넌트의 특징

• 메모리를 덜 쓴다.
• 간단하다.
• 다른 컴포넌트와 데이터를 주고받지 않을 때 주로 사용한다.
• 최근에는 함수형 컴포넌트가 대세라 가급적이면 함수형 컴포넌트로 코드를 짜는게 좋다.

2. 클래스형 컴포넌트

import React from 'react';

class Body extends React.Component {

	render() {
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent;

동일한 역할을 하는 컴포넌트이지만 생김새가 다르다.

클래스형 컴포넌트의 특징

• render()가 필수적으로 구현되어야 한다. render 시, 컴포넌트의 state를 변경하지 않는다.
• constructor(props)는 메소드를 바인딩하거나 state를 초기화할때 사용된다.