[React] Movie-app Notes - useEffect()

useEffect(arg1, arg2)
arg1 : effect
一度だけ実行したいコード
arg2 : dependencies(deps)
react.jsが注目するstate/配列内のキーワードの少ない状態が変化した場合にのみ実行されます.

useEffect(()=>{
  console.log('once')
}, []);

=>キーワードはありませんが、重複する必要はありません->1回のみ実行

useEffect(()=>{
  console.log(keyword)
}, [keyword]);

=>[keyword]は、その部分が変化した場合にのみレンダリングされます.

import React from "react";
import { useState, useEffect } from "react";

function App() {
    const [counter, setCounter] = useState(0);
    const [keyword, setKeyword] = useState("");
    const onClick = () => setCounter((cur) => cur + 1);
    const onChange = (e) => setKeyword(e.target.value);

    useEffect(() => {
        console.log("once");
    }, []);

    useEffect(() => {
        console.log("key");
    }, [keyword]);

    useEffect(() => {
        console.log("click");
    }, [counter]);

    useEffect(() => {
        console.log("keyword or click");
    }, [keyword, counter]); // 둘 중 하나가 실행될 떄

    return (
        <div>
            <input
                value={keyword}
                onChange={onChange}
                type="text"
                placeholder="search..."
            />
            <button onClick={onClick}>click</button>
        </div>
    );
}

export default App;

Cleanup;
あまり使いにくいですが.
いつ生成され破壊されるか知ることができ、参考にすることができます.

import React from "react";
import { useState, useEffect } from "react";

function Hello() {
    useEffect(() => {
        console.log("created");
        return () => console.log("cleanup");
    }, []);
    return <h1>hello</h1>;
}

function App() {
    const [showing, setShowing] = useState(false);
    const onClick = () => setShowing((cur) => !cur);

    return (
        <div>
            {/* js 쓸 때는 항상 중괄호!!!!!!!! */}
            <button onClick={onClick}>
                {showing ? "hide" : "show"}
            </button>
            {showing ? <Hello /> : null}
        </div>
    );
}

export default App;