React #6

가보자고

---

✅ useEffect()

• state 가 변화할 때 모든 component 는 다시 실행되고, 다시 렌더링되며 모든 code 들이 다시 실행되는데,
  useEffect() 를 사용하면 특정 코드들이 첫 번째(처음) component render 에서만 실행되게 할 수 있다.
• 대표적으로, api를 딱 한번만 호출하고 그 뒤로는 다시 호출하기 싫은 경우에 사용
• 두 개의 argument를 가진다.
  • 첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드
  • 두 번째 argument는 [] 배열로 값을 줄 수 있으며,
    리액트에게 "배열 안에 준 값이 변화"하는지 보고 있다가, 그 값이 변화할 때만 코드를 실행시키라고 하는 기능

// 예시)

const irunOnlyOnce = () => {
	console.log("i run only once!")
};

useEffect(irunOnlyOnce, [])

• 위와 같이 작성 시, irunOnlyOnce 함수는 딱 한번만 실행이 되고, 그 뒤로는 다신 호출되지 않는다!
• 두 번째 argument를 자세히 알아보자

const [counter, setCounter] = useState("");
const [keyword, setKeyword] = useState("");

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

• 위와같이 작성하면, 1번만 실행된다.
• array 안에 아무것도 작성하지 않았으므로, 리액트가 지켜볼게 없으니 처음 한번만 실행되는 것

const [counter, setCounter] = useState("");
const [keyword, setKeyword] = useState("");

useEffect(() => {
	console.log("SEARCH FOR....", keyword);
}, [keyword]); <<<----

• [keyword]를 추가하였으므로,
  리액트는 첫번째 렌더 후 keyword 의 값이 변화할 때'만' 코드가 실행된다.
• 만약 counter 나, 다른 state 의 값이 변화한다해도 NO신경. 무족권 keyword 만 바라보며 keyword의 값이 변화했을 때만 console.log를 실행시킨다.
• 여러개의 값을 지정할 수도 있다. [keyword,counter, ...]

✅ 컴포넌트 생명 주기

• Cleanup function 을 공부하기 전, 컴포넌트의 생명주기를 알아야 이해하기 쉬움

컴포넌트 생명 주기

1. 마운트 (Mount)
   • 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미
2. 업데이트 (updatae)
   • 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우
3. 언마운트 (UnMount)
   • 컴포넌트가 DOM에서 제거되는 것. 호출되는 함수는 하나로 componentWillUnmount 함수. 해당 컴포넌트가 제거되기 직전에 호출된다.

✅ Cleanup function

• Cleanup function 은 'useEffect Hook 안에서 리턴'할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소한다.
  즉, 컴포넌트가 destroy될 때도 코드를 실행할 수 있다.

예시)

function Hello() {
	return <h1>Hello</h1>;
}

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

• <Hello /> 컴포넌트를 숨기고 보여주는 기능이다.
• 처음에는 <Hello /> 컴포넌트 아래 Hide 라고 적힌 버튼을 보여주고,
  onClick 이벤트가 발생하면 true 로 바뀌며 <Hello /> 컴포넌트가 제거(destroy)되고, Show 버튼이 뜨도록 만듦

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

• <Hello /> 컴포넌트가 보여질 때 콘솔창에 created :) 문구가 뜨도록 useEffect 를 추가하였다.
• cleanup function 을 사용하여 <Hello /> 컴포넌트가 destroy 될 때 콘솔에 destroyed :( 라고 찍어보자.

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

• 이렇게 사용해줄 수 있다!
• goooood 😎

---

🚩 hooks-effect : https://ko.reactjs.org/docs/hooks-effect.html