React - FunctionalComponent. 함수형 컴포넌트?

현재 실무에서 Class Component 클래스 컴포넌트로만 개발을 진행하고 있기 때문에, Functional Component 함수형 컴포넌트는 접해 본 적이 없어, 공부해보고자 합니다. 

 

1. 함수형 컴포넌트?

함수형 컴포넌트는 JS 함수로 정의된 리엑트 컴포넌트 입니다. state, lifeCycle 관련 기능이 사용 불가능 하나, 주로 Hook를 통해 해결합니다. 클래스 형보다 메모리 자원을 덜 사용하며 컴포넌트 선언이 편하다는 장점이 있습니다.

[ 클래스 컴포넌트와 차이점 ]

버튼을 누르면 name, email 값을 바꿔주고 콘솔에 user click, email click 을 찍어주는 간단한 코드를 함수형과 클래스형 구현해보면 아래와 같습니다.

//함수형 컴포넌트 예시
import React, {useState, useEffect} from 'react';

function FuncEx(){

    const [name, setName] = useState('user'); //state값 name, setName함수를 통해 name을 바꿈
    const [email, setEmail] = useState('user@tistory.com'); //state값 email, setEmail함수를 통해 email을 바꿈
    
    const onClickBtn=(e)=>{
    	setName('user click'); //name을 name click로 바꿈
        setEmail('email click'); //email을 email click로 바꿈
    }
    
    useEffect(() => {
        console.log('name changed')
    }, [name]); //state값 name이 바뀔 때 마다 호출
    
    useEffect(() => {
        console.log('email changed')
    }, [email]); //state값 email이 바뀔 때 마다 호출
    
    return (
        <div> 
            <span>Hi</span>
            <button onClick={onClickBtn}> Click! </button>
        </div>
    )
}

//클래스형 컴포넌트 예시
import React, {Component} from 'react';

class ClassEx extends Component{
    constructor(){
    	this.state = { //state값 초기화
            name:'user',
            email: 'user@tistory.com'
        }
    }
    
    componentDidUpdate = (prevProps, prevState) => { //lifeCycle name,email 값이 바뀔때마다 호출
    	if(prevState.name != this.state.name){
        	console.log('name changed');
        }
        if(prevState.email != this.state.email)[
        	console.log('email changed');
        }
    }
    
    onClickBtn(e){
    	this.setState({
        	name : 'user click', //name을 name click로 바꿈
        	email : 'email click' //email을 email click로 바꿈
        })
    }

// 에로우 화살 표현으로 함수 구현
//    onClickBtn = e => {
//    	this.setState({
//        	name : 'user click',
//        	email : 'email click'
//        })
//    }

    render(){ //render 필수로 있어야한다.
    	return (
            <div>
            	<span>Hi</span>
                <button onClick={this.onClickBtn}> Click! </button>
            </div>
        )
    }
}

 

위 코드를 기준으로 요약하자면 아래와 같습니다!

 

함수형

• 선언 시 funcion 키워드가 필요하다.
• state, lifeCycle 관련 기능 사용이 불가능하기 때문에 Hook를 사용한다, (useState,useEffect ...)
• 함수 선언 시 const 키워드 + 함수 형태로 선언하고, 요소에 호출할때 this가 필요없다. 

클래스형

• 선언 시 class 키워드가 필요하며 Component를 상속 받아야하고, render() 메소드가 반드시 필요
• state, lifeCycle 관련 기능(setState, componentdidMount, componentdidUpdate..)의 사용이 가능
• 함수 선언 시 에로우 화살 표현으로 바로 선언 가능하며, 요소에 호출하기 위해서는 this를 붙여야 함

* this ?

클래스 컴포넌트를 사용할 때는 this를 항상 신경써야 합니다. 컴포넌트 안에서 this를 통해서 state, props, refs, lifeCycle, method 등을 참조 가능합니다.  하지만 함수형 컴포넌트에서는 선언한 함수들모두 전역 객체를 this로 가지기 때문에 애초에 this가 다 같기 때문에 딱히 중요하지 않습니다.

 

 

오늘은 시간이 많지 않아.. 프로젝트에 직접 사용은 못 해보고 기본적인 개념을 보고, 간단한 코드를 보면서 학습했다. 내일부터 직접 써보고, 특히 Hook 라이프 사이클에 대해서 많이 찾아봐야겠다!