드디어! 본격적으로 리액트 앱을 만들기 전 마지막으로 중요한 문법 하나만을 남겨두고 있다.
이번 시간에는 Effect에 대해 알아보자.

Effect?

리액트를 사용하면서 render가 반복적으로 실행되어도 괜찮은 코드가 있고 아닌 코드가 있다. 컴포넌트가 처음 한번만 실행되길 바랄때가 있기 때문이다.

예를들어, API를 통해 데이터를 가져올때 첫번째 컴포넌트 render에서 API를 호출하고 그 다음부턴 re-render할 필요가 없는 경우이다.

따라서 특정 코드들이 첫번째 render시에만 코드가 실행되고, 다른 state 변화에는 실행되지 않도록하기 위한 방법이 Effect 훅이다.

import { useEffect } from "react"
useEffect(effect, [,deps])

• 첫번째 인자는 실행하고 싶은 함수
• 두번째 인자는 dependencies로 배열이 들어간다.

Effect 사용해보기

검색어를 입력받은 input 요소와 버튼을 클릭했을때 카운팅되는 코드를 예로 들어보겠다.

import { useState, useEffect } from "react"

function App() {
	const [counter, setValue] = useState(0)
    const [keyword, setKeyword] = useState("")
    
    const onClick = () => setValue((prev) => prev+1)
    const onChange = (event) => setKeyword(event.target.value)
    
    useEffect(() => {
    	console.log("i run only once")
    }, [])
    useEffect(() => {
    	console.log("i run when keyword changes")
    }, [keyword])
	useEffect(() => {
    	console.log("i run when counter changes")
    }, [counter])
    useEffect(() => {
    	console.log("i run when changes both")
    }, [keyword, counter])
    
    return (
    	<div>
        	<input
            	value={keyword}
                onChange={onChange}
                type="text"
                placeholder="Search here"
            />
            <h1>{counter}</h1>
            <button onClick={onClick]>click me</button>
        </div>
    )
}

export default App

• useEffect(() => {console.log("i run only once")}, [])
  두번째 인자가 빈 array의 경우 코드가 단 한번만 실행된다.

• useEffect(() => {console.log("i run when keyword changes")}, [keyword])
  useEffect(() => {console.log("i run when counter changes")}, [counter])
  keyword나 counter가 변화할때 코드를 실행시킨다.
  -> react.js에 keyword나 counter가 변화할때 코드를 실행할거라고 알려주는 것임

• useEffect(() => {console.log("i run when changes both")}, [keyword, counter])
  두번째 인자는 배열로 받기때문에 keyword와 counter 둘다 변화가 있는 경우임으로도 알려줄 수 있다.

Cleanup

아래의 코드를 먼저 확인해보자.

function Hello() {
	console.log("hiii")
}

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>
}

'show' 버튼을 클릭시 졸려 문구가 나타나고 hide 버튼을 클릭시 없어지는 간단한 코드이다.

개발자도구에서 Elements를 보면 hide 버튼을 누를때 리액트는 단순히 사라지게 만드는것이 아닌 컴포넌트를 없애버리는 것으로 알수있는데, 해당 컴포넌트가 없어질때 console.log를 새로 찍고싶은 마음이 생겼다고 가정해보자.(콘솔 로그뿐만이 아니라 어떠한 동작을 위한 함수도 오케이다 이말씀)

이때를 위한 것이 cleanup 함수이다..!

'hide' 버튼을 눌렀을때, 즉 Hello 컴포넌트가 없어졌을때 byeeee를 출력하기 위해서는 함수를 return 해주어야한다.

function Hello() {
	useEffect(() => {
   	console.log("hiiii")
    return () => console.log("byeeeeeee")
    }, [])

	return <h1>졸려...ㅠㅠ</h1>
}

• return () => console.log("byeeeeeee")
  Hello 컴포넌트가 없어질때 원하는 동작을 리턴해준다.
  이러한 방식을 cleanup function 이라고 한다.

같은 cleanup이지만 위의 경우는 좀더 간결한 방법이고 아래 방법으로도 사용할 수 있으니 참고하자!

function Hello() {
	function byFn() {
    	console.log("byeeee")
    }
    function hiFn() {
    	console.log("hiii")
        return byFn
    }
}

이로써 니꼬쌤의 왕초보 리액트 강의 문법편이 끝났다.
기록한만큼 머리에 오래오래 남아서 풀스택맨이 되는 길에 도움이 됐음 좋겟다.
다음 강의부터는 연습을 통한 앱 만들기라서 특별한 내용이 아닌이상 리액트와 관련된 글은 오늘이 마지막이 될 것같다. 고생했다 나 자신!

공부한 내용을 정리하고 글찌는게 은근 오래걸리고 쉽지않음을 다시한번 느끼며 아디오스!