[React] Movie-app Notes - useEffect()

useEffect(arg1, arg2)

arg1 : effect
단 한번만 실행하고 싶은 코드

arg2 : dependencies(deps)
react.js가 지켜볼 state/ 이 배열에 적은 키워드의 상태가 변할때만 실행할것

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

=> 단 키워드가 없으니 반복할 것도 없음 -> 한번만 실행됨

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;