[React] 컴포넌트 사이드 이펙트 다루기 :: useEffect

 

🎯 useEffect

• useEffect를 사용하면 사이드 이펙트를 수행할 수 있다. 사이드 이펙트는 부수효과라고 생각하면 된다.
• useEffect는 컴포넌트가 렌더링 이후에 의도한 효과에 대해서만 부수효과가 발생된다.

 

📝 소제목

const rootElement = document.getElementById('root');

const App = () => {            
    const [keyword, setKeyword] = React.useState(() => {
        console.log("initialize");
        return window.localStorage.getItem("keyword")
    });
    const [result, setResult] = React.useState("");
    const [typing, setTyping] = React.useState(false);


    console.log("render");
    React.useEffect(() => {
        console.log("effect");
        window.localStorage.setItem("keyword", keyword)
    }, [keyword, typing]); // 대괄호 안에 변수가 바뀔 때만 useEffect 동작


    function handleChange(event) {
        setKeyword(event.target.value);
        setTyping(true)
    }

    function handleClick() {
        setTyping(false);
        setResult(`we find results of ${keyword}`)
    }

    return (
        <>
            <input onChange={handleChange} value={keyword} />
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for..${keyword}` : result}</p>
        </>
    )
};

ReactDOM.render(<App />, rootElement);

• 로컬 스토리지에서 값을 불러올 때 딜레이가 발생될 수 있다.
  • useState는 함수로 값을 넣어줄 수 있다. 즉, 초기값을 return 하는 함수로 넣어줄 수 있다.
  • 이렇게 했을 때는 처음 값을 읽어오는 시간이 늦더라도 결국 이 함수가 실행되어서 결과를 받아올 수 있다.
• dependency array에 아무것도 안 주면 모든 변화에 다 반응한다.
  • dependency array를 빈 배열로 주면 처음에만 동작한다.
  • dependency array에 내가 부수효과를 내고 싶은 변경에 대한 상태 값 변수를 괄호 안에 넣어주면 그 변화에 따라 useEffect가 동작된다. -> 이렇게 많이 사용된다.

 

🏷 요약

• 사이드 이펙트 -> 부수효과
• useState -> lazy initialize
• useEffect -> dependency array
  • 화면이 처음 렌더링 되면 한 번은 실행된다.

 

📌 참고

• Using the Effect Hook - React
• 글자 4개로 리액트 컴포넌트를 최적화하는 방법 -> lazy initialize