React Component?
-리액트로 만들어진 앱을 이루는 최소한의 단위
-MVC의 V(View)를 독립적으로 구성하여 재사용 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있음(유지보수 굳)
-데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수
-컴포넌트 이름은 항상 대문자 시작해야함.(소문자는 DOM태그로 취급하기 때문)
props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다.
컴포넌트의 종류
1)함수형 컴포넌트 (Stateless Functional Component)
가장 간단하게 컴포넌트를 정의하는 방법은 JS 함수를 작성하는 것이다.
JS함수를 선언하듯이 function으로 컴포넌트를 정의하고, return문에 JSX코드를 반환한다.
function MyComponent() {
return (
<div>
Hello React!
</div>
);
}
또한 화살표 함수(람다)로도 표현이 가능하다.
const MyComponent = () => {
return (
<div>
Hello React!
</div>
);
};
*함수 컴포넌트를 사용하는 이유?
1)Hooks
과거에는 함수형 컴포넌트가 state,라이프사이클을 지원하지 않았디 때문에 클래스형 컴포넌트를 많이 사용했지만,React v16이후부터 Hooks를 통한 state및 라이프사이클 관리가 가능해져 리액트에서도 공식적으로 함수형 컴포넌트를 권장한다.
2)직관적인 코드
JS함수 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용하기 때문에 개발자에게 직관적이다.
3)메모리 자원 효율
클래스형 컴포넌트에 비해 메모리 자원을 적게 사용한다.
2)클래스형 컴포넌트(Class Component)
-JS의 "클래스"기반 컴포넌트로, class로 정의하고 render()함수에서 JSX코드를 반환한다.
-리액트 초기 상태(state)관리가 필요한 컴포넌트는 클래스형 컴포넌트로 정의하였다.
-상태(state)는 컴포넌트에서 초기화되고 업데이트 되는 데이터이다.
*클래스 컴포넌트 특징
1)class키워드로 컴포넌트 생성
2)React.Component 상속
3)render()메서드 필수 사용
4)this 키워드 사용
state,props,refs,컴포넌트 메서드,생명주기 메서드를 사용할 때 this로 프로퍼티를 참조하여 사용한다.
클래스 컴포넌트는 반드시 {Component}를 import하고 React.Component를 상속받아야 한다.
import React, { Component } from 'react';
Component를 상속받고, render()메서드를 통해 return문 안에 있는 JSX 코드를 반환한다.
class MyComponent2 extends Component {
render() {
return (
<div>
Hello React!
</div>
);
}
}
함수형 컴포넌트와 클래스형 컴포넌트의 차이
클래스형 :
-state,lifeCycle 관련 기능사용 가능
-메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
-임의 메서드를 정의할 수 있음.
함수형:
-state,lifeCycle관련 기능사용 불가능(하지만 Hook을 통해 해결)
-메모리 자원을 클래스형 컴포넌트보다 적게 사용함.
-컴포넌트 선언이 편하다.
함수형 클래스보다 후에 나왔기 때문에 더 편한 건 사실이다. 그러나 과거 클래스 컴포넌트를 사용한 프로젝트도 있기 때문에, 유지보수를 위해 알아둬야 하는 문법이다.