[React] 리액트 useEffect 개념 및 활용

useEffect

 

- 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용

- 컴포넌트 외부와의 상호작용, 데이터 로딩, 구독 등의 작업

- 첫번째 인자는 동작할 함수, 두번째 인자는 "dependency" 배열

- 컴포넌트가 렌더링 될 때마다 호출되는데 두번째 요소인 "dependency" 배열(deps)의 값이 변경되었을 때만 동작

- "dependency" 배열(deps)이 비어 있으면 처음 렌더링 될 때 한번만 동작

- 첫번째 인자인 함수에서 함수를 반환하면 컴포넌트가 제거되면서 정리하는 작업을 담당 (clean-up)

 

useEffect(() => {
// 부작용을 처리하는 코드
return () => { // 선택사항
// 클린업 작업을 처리하는 코드
}
}, [state1, state2, ...]);

 

// useEffect 활용 //

import { useEffect, useState } from "react";
import styles from './App.css'
function Hello() {
    function end() {
        console.log('Hello End');
    }
    function start() {
        console.log('Hello Start');
        return end;
    }
    useEffect(start, []);
    return <h1>Hello</h1>;
}

function App() {
    const [counter, setValue] = useState(0);
    const [search, setSearch] = useState('');
    const [show, setShow] = useState(false);
    const onClick = () => setValue(counter + 1);
    const onShowClick = () => setShow(prev => !prev);
    console.log('컴포넌트가 렌더링 될 때마다 실행');
    useEffect(() => {
        console.log('처음 렌더링 될 때만 동작');
    }, []);
    useEffect(() => {
        console.log('search가 수정 될 때 동작');
        }, [search]);
    useEffect(() => {
        console.log('counter가 수정 될 때 동작');
    }, [counter]);
    function onChange(e) {
        const value = e.target.value;
        setSearch(value);

    }
    console.log(search);
    return (
        <div className={styles.App}>
            <h1>{counter}</h1>
            <button onClick={onClick}>Click</button>
            <input onChange={onChange} placeholder='검색어 입력' />
            {
                show
                    ? <Hello />
                    : null
            }
            <button onClick={onShowClick}>{show ? 'Hide' : 'Show'}</button>
        </div>
    );
}
export default App;