[WIL] ReactJS 함수형과 클래스형

리액트에서 컴포넌트랑 UI 또는 기능을 부품화해서 재사용이 가능하도록 만드는 것이다.

따라서 리액트는 동일한 UI를 재활용하고 안의 데이터만 바꾸는 형식으로 구성되어있다.

 

컴포넌트를 만드는 방식에는 함수형과 클래스형으로 나뉘는데 예전에는 클래스형만 라이프 사이클을 관리할 수 있었기 때문에 종종 클래스형 컴포넌트로 많이 짜여졌으나 리액트 버전 16.8 이후 Hook 기능이 추가되면서 요즘은 함수형을 더 많이 쓰는 추세다, 실제로 리액트 공식 문서에서도 함수형 컴포넌트와 Hook을 함께 사용할 것을 권장하고 있다.

함수형 컴포넌트

function New() {	
    return <div>함수형 컴포넌트</div>    
}

export default New

함수형 컴포넌트는 말 그대로 함수형으로 쓰는 방식의 컴포넌트이다. 자바스크립트의 ES6 문법을 적용하여 화살표 함수로 표현해줄 수도 있다. 클래스형 컴포넌트는 상대적으로 복잡한 로직을 가지고 있지만 함수형 컴포넌트는 쓰는 방식이 간단하여 가독성이 좋고 간결하다.

 

Hook

Hook은 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해주는 기능이다.

Hook에는 반드시 지켜야 할 규칙이 있는데 먼저, 최상위 수준에서 호출해야 한다. 루프나 조건 또는 중첩 함수 내에서 Hook을 호출하면 안된다.

두 번째는 React 함수 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서도 Hook을 호출할 수 없다.

 

클래스형 컴포넌트

import { Component } from 'react';

class New extends Component {
	render(){
    	return <div>클래스형 컴포넌트</div>
    }
}

export default New

클래스형 컴포넌트는 클래스 기반으로 컴포넌트를 구성하고 render() 를 통해 JSX를 반환한다.

또한 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다.

자주 사용하진 않지만 예전에 이를 사용하여 유지보수를 진행하는 기업들이 있다. 클래스형으로 구성된 프로젝트의 유지보수를 해야 하는 경우라면, 클래스형 컴포넌트에 대한 개념도 알아야 한다.

 

Life Cycle

Life Cycle은 React의 생명 주기를 의미한다.

컴포넌트가 브라우저 상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들이 있는데 이러한 것들을 라이프 사이클 메서드(Mount, Update, Unmount)라 한다.

 

Reference

https://devowen.com/298

https://velog.io/@codns1223/React-LifeCycle