[React.js] useMemo와 useEffect

 

함수형 컴포넌트에서 외부의 데이터를 가져와야 할 때가 있죠.

useMemo와 useEffect를 쓸 수 있어요.

 

둘 다 두 번째 파라미터로 외부 데이터의 변경을 관찰할 수 있는데요.

만약 useEffect(함수, []) 이렇게 빈 배열을 넣으면 처음에 딱 한 번만 함수가 실행되고요.

useEffect(함수, [props.value])라고 하면 props.value가 변경될 때마다 함수가 실행되요.

함수형 컴포넌트는 생명주기(componentDidMount, componentDidUpdate, ...) 메소드가 없어서 useEffect로 대신 구현하기도 해요.

 

먼저 useMemo 예제를 보죠.

Main 컴포넌트는 1초마다 값을 바꾸는 역할만 해요.

import React, { Component, useEffect, useState } from 'react';
import { useMemo } from 'react';

// 1초마다 값을 바꾸는 역할
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { value: 1 };
    }

    componentDidMount() {
        setInterval(() => {
            this.setState({
                ...this.setState,
                value: this.state.value + 1,
            });
        }, 1000);
    }

    render() {
        return React.cloneElement(this.props.children, {
            value: this.state.value,
        });
    }
}

// 여기만 보면 되요
function Counter(props) {
    const _v = useMemo(() => props.value, [props.value]);

    return (
        <div>
            <h1>{_v}</h1>
        </div>
    );
}

function App() {
    return (
        <Main>
            <Counter />
        </Main>
    );
}

export default App;

 

Counter에서 useMemo를 쓰고 있어요.

두 번째 파라미터에 props.value를 넣었기 때문에 해당 값이 변경될 때마다 새로운 값을 가져와요.

만약 [] 빈 배열을 넣었다면 첫 번째 값을 가져온 후로는 값이 바뀌지 않을거에요.

 

Counter의 useMemo를 useEffect로 변경해보죠.

function Counter(props) {
    const [_v, _setV] = useState(null);

    useEffect(() => {
        _setV(props.value);
    }, [props.value]);

    return (
        <div>
            <h1>{_v}</h1>
        </div>
    );
}

 

만약 Counter 내에서 _v의 값을 변경하고 싶다면 useEffect를 사용할 수 있겠죠.

외부의 값을 가져오기만 할거라면 useMemo를 쓰면 돼요.

 

 

영어, 중국어 공부중이신가요?

홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!

한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어