[React] 함수형 컴포넌트와 클래스형 컴포넌트

• 클래스형 컴포넌트

rcc + 엔터로 손쉽게 생성할 수 있다. 최근에는 함수형 컴포넌트를 더 많이 쓰는 추세이지만, 기존에 리액트로 만들어진 서비스들을 유지 보수하기 위해서 클래스형 컴포넌트를 알아야한다. state와 props가 변화하지 않는 컴포넌트 혹은 랜더를 한번만 시킬 컴포넌트는 'PureComponent'로 만들어준다. 이렇게되면 부모 컴포넌트에서 랜더가 일어나더라도 호출되지 않으며, 원하지 않는 랜더를 줄여 서비스의 성능을 향상시킬 수 있다. 

 

• 함수형 컴포넌트

rsc + 엔터로 손쉽게 생성할 수 있다. 

// 함수형 컴포넌트 템플릿
import React from 'react';

const func = () => {
    return (
        <div>
            
        </div>
    );
};

export default func;

 

state와 render 함수 영역으로 나뉘어져있던 클래스형 컴포넌트와는 달리, 지역 안에 멤버 변수와 리턴문(jsx)을 가지고 있는 평범한 함수의 모양이다. hook이 나오기 전까지는 함수로 리액트의 props, state같은 동적 데이터를 처리할 수 없었지만 hook에서 제공하는 api를 사용한다면 함수로도 동적 데이터를 처리하는 컴포넌트를 만들 수 있다. (https://ko.reactjs.org/docs/hooks-intro.html)

 

function examp() {
	const [count, setCount] = useState(0);
    // useState라는 Hook(react에서 제공하는 함수에서 리액트 컨셉을 사용하기위한 apis)을 이용
    // 1. count : 'count'라는 새로운 상태 값 정의
    // 2. setCount : 'setCount'라는 함수로 count의 값을 동적으로 변화시키겠다고 선언
    // 3. useSate(0) : 'count'라는 state의 초기값을 0으로 지정
    
    return (
    	<div>
        	<button onClick={() => setCount(count + 1)}>
            // 멤버 변수로 만들어준 setCount함수를 사용하여 count state값을 변경
        </div>
        );
      }

 

사용할 때 주의해야할 점은, state를 한번만 실행하고 상태 변화 시 랜더 함수만 계속 호출하는 클래스형 컴포넌트와는 달리 함수형 컴포넌트는 호출될 때마다 함수 안의 모든 코드가 실행된다는 것이다. 따라서 함수형 컴포넌트에서 state값을 사용할 경우, setState함수로 초기값을 지정해주어 리액트가 초기값을 기억하도록 해야한다. 이렇게 하면 state나 props 변경 시 함수가 계속 호출되어 함수 안의 모든 코드가 재실행된다고 하더라도 리액트가 따로 저장해둔 초기값을 기억하고 있다. 

 

함수 컴포넌트에서 useState라는 api를 사용하면 this 바인딩을 꼭 해줘야하는 클래스형 컴포넌트보다는, 코드를 간단히 쓸 수 있는 함수형 컴포넌트를 많이 쓰는 것이 최근의 트렌드이다.

 

함수형 컴포넌트를 PureComponent처럼 사용하는 법

함수형 컴포넌트 제작 시 memo(props => {.....})를 사용한다면, props를 전달받지 않으면 실행되지 않는 컴포넌트를 만들 수 있다. 

import React, { memo } from 'react';

const HabitAddForm = memo(props => {
    const formRef = React.createRef();
    const inputRef = React.createRef();

    const onSubmit = event => {
        event.preventDefault();
        console.log(inputRef.current.value);
        const name = inputRef.current.value;
        name && props.onAdd(name);
        formRef.current.reset();
    };

    return (
        <form ref={formRef}
              className="add-form" onSubmit={onSubmit}>
            <input 
                ref={inputRef}
                type="text"
                className="add-input" 
                placeholder="please enter your habit"
            />
            <button className="add-button">Add</button>
        </form>        
        );  
    })

export default HabitAddForm;