221219 TIL

useEffect

: useEffect는 리액트 컴포넌트가 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook!

 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다거나

 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때 사용한다.

 

즉 다시 말해, useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다.

 

의존성 배열(dependency array)

: 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게!

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

의존성 배열안에 어떠한 값도 넣지 않으면(빈 배열) useEffect가 처음 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안된다!

즉, 어떤 값이 변해도 useEffect는 실행이 되어서는 안된다.

 

클린 업(clean up)

: 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶으면!

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수.
	}, [])

	return <div>hello react!</div>
};

export default App;

📌정리

✔ useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅!
✔ 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
✔ useEffect에서 함수를 한번만 실행시키고자 할 때는 의존성 배열을 빈 배열로 둔다.

---

📌 더 알아봐야 할 키워드

• props Drilling : 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미.
                            해당 props를 사용하지 않는 컴포넌트들을 거쳐가야 하는 것이 문제.
                            그래서 이 것을 해결하기 위해 Redux 같은 전역 상태 관리 라이브러리를 사용!
  
  
• strict mode : 자바스크립트 문법을 엄격하게 검사하여 최적화 작업에 문제를 일으킬 수 있는 코드에 대해
                        명시적인 에러를 발생시키는 것.
                        스크립트의 시작 혹은 함수의 시작 부분에 "use strict" 또는 'use strict'를 선언하면
                        strict 모드의 코드 작성 시작.
                        자세한 건 문서 참고! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode
  
  
• mount & unmount : useEffect라는 Hook을 사용하여 컴포넌트가 처음 나타났을 때를 mount,
                                    컴포넌트가 사라질 때를 unmount라고 한다.
  
  
• react Lifecycle