#6. Effects

Effect

특정 코드들이 처음 컴포넌트를 렌더링 할 때에만 실행되고, state가 변경되어 리렌더링 할 때에는 실행되지 않게 하기 위해 사용할 수 있다

function App() {
    const [counter, setValue] = useState(0);
    const onClick = () => setValue((prev) => prev + 1);
    useEffect(() => {
        console.log("Call the API.");
    }, []);
    return (
        <div>
            <h1>{counter}</h1>
            <button onClick={onClick}>click me</button>
        </div>
    );
}

위와 같이 useEffect의 첫번째 argument에 함수를 넣어두면, 첫번째 render 시점에만 동작하고, state가 변경되어 리렌더링되어도 여러 번 실행되지 않는다

딱 한 번만 실행되는 것이다

 

const [keyword, setKeyword] = useState("");
const onChange = (event) => setKeyword(event.target.value);
useEffect(() => {
    console.log("SEARCH FOR", keyword);
}, [keyword]);

useEffect의 두번째 argument(배열)에 변수를 넣어두면, 해당 변수의 값이 변경될 때마다 함수를 실행시킨다

 

Claenup

function Hello() {
    useEffect(() => {
        console.log("Im here!");
    }, []);
    return <div>Hello</div>;
}

function App() {
    const [showing, setShowing] = useState(false);
    const onClick = () => setShowing((prev) => !prev);
    return (
        <div>
        { showing ? <Hello /> : null }
            <button onClick={onClick}>
                {showing ? "Hide" : "Show"}
            </button>
        </div>
    );
}

위와 같이 코드를 작성하게 되면, showing 값이 false일 때 Hello 컴포넌트가 아예 스크린상에서 지워지기 때문에, 다시 Hello 컴포넌트를 렌더링하게 되면 useEffect를 사용했던 함수도 다시 실행되게 된다

 

function Hello() {
    useEffect(() => {
        console.log("Created!");
        return () => console.log("Destoryed!");
    }, []);
    return <div>Hello</div>;
}

useEffect의 함수에서 return값을 주게 되면, 이 값은 컴포넌트가 destory될 때 실행되게 된다

 

function Hello() {
    function byFn() {
        console.log("Destoryed!");
    }
    function hiFn() {
        console.log("Created!");
        return byFn;
    }
    useEffect(() => {hiFn}, []);
    return <div>Hello</div>;
}

위와 똑같이 동작하는 코드이다

즉, useEffect에서 동작하는 함수의 반환값으로 또 다른 함수를 넣어주면, 그 함수는 컴포넌트가 destroy될 때 실행되게 된다