리액트의 꽃이자 리액트의 핵심인 컴포넌트, 이 컴포넌트를 만드는 방법에는 2가지가 있다. 바로 클래스형 컴포넌트
와 함수형 컴포넌트
이다.
과거에는 클래스형 컴포넌트를 주로 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅을 지원해 현재는 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 잇다.
state를 정의할 수 있고 render 함수의 return 값에 따라 원하는 UI를 보여줄 수 있다.
class ClassCoponent extends React.Component{
state ={
};
render(){
return(
<div className = "Container"> </div>
);
}
}
기본적으로 클래스형 컴포넌트와 함수형 컴포넌트가 하는 동작은 같다.
하자민 클래스형 컴포넌트는 보다 더 많은 기능을 제공해주는 것이 함수형 컴포넌트와 가장 큰 차이점이다.
state를 이용한 상태를 나타내거나 componenet lifecyle에 정의된 메서드를 이용해 원하는 순서에 특정한 동작을 하도록 할 수 있다.
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다. 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었늗네 이러한 단점은 리액트 훅이 도입되면서 해결되었다.
함수형 컴포넌트 선언 방식에는 기존의 함수 선언 방식이 있고, ES6의 화살표 함수 방식이 있다. 화살표 함수의 경우 파라미터로 전달할 떄 유용하다.
import React from 'react';
function App(){
const name = '리액트'
return <div> {name} </div>
}
export default App;
함수형 컴포넌트에서 state를 생성하는 방법은 useState 메서드를 사용한다.
import {useState} from 'react'
const [state, setState] = useState()
출처 및 참고
https://devowen.com/298