[원티드 FE 프리온보딩] 3-3. useEffect, Context API

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금)

 

1. useEffect

useEffect에서 의존성 배열 자세히 살펴보기

📍의존성 배열이란?

의존성이란?

- A라는 요소가 온전히 동작하기 위해서 B, C 등의 다른 요소들을 필요로 한다면

- A는 B, C 등에 의존하고 있다고 표현

⭐B, C 등이 A의 의존성이 된다

 

useEffect 의 의존성 배열

- effect 함수가 사용(의존하고 있는) 외부 값들의 모음

 

📍의존성 관점에서 useEffect 제대로 사용하기

⭐가능한 의존성 적게 만들기

⭐setState 함수도 의존성 배열에 넣어야 

- bad

// 많은 의존성 사용
function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalID = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(intervalID);
  }, [count, setCount]);

  return (
    <div>
      <h1>count:{count}</h1>
    </div>
  );
}

 

- good

// setCount에 count 대신 콜백함수 사용하여 의존성 줄임
function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalID = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalID);
  }, [setCount]);

  return (
    <div>
      <h1>count:{count}</h1>
    </div>
  );
}

 

이외에도

- effect 안에 함수를 정의하여 의존성 제거

- effect 안에서 실행할 함수를 컴포넌트 밖에서 정의

- useCallback으로 메모이제이션

같은 방법을 활용할 수 있다

 

2. Context API

📍Context API란?

- React의 단방향 데이터 전달을 극복

- props drilling 문제를 해결

 

📍사용법

1️⃣createContext

- createContext 함수를 통해 context 객체 생성

- 인수로 default value 전달 가능

(Provider에서 데이터 제공하기 전에 사용할 초기값)

 

2️⃣Provider

- 만들어진 context 객체의 프로퍼티 컴포넌트

- value에 전달할 값을 입력

 

3️⃣useContext

- Context의  value에 접근

 

const UserContext = createContext(null);

const user = {name: "yeonuk"};

<UserContext.Provider value={user}>
	<Child />
</UserContext.Provider>


function Child() {
	const user = useContext(UserContext);
	
	return <h1>{user.name}</h1>
}