2023-11-20 본 캠프 33일차 / 52일차 TIL

2023-11-20 본 캠프 33일차 / 52일차 TIL

주요 진행사항

- 알고리즘 문제풀이

- 리액트 강의 수강

 

리액트 강의 수강 내용 정리

1. useEffect

useEffect는 서버와 통신하는 것과 같이 Side Effect를 처리할 때 사용한다.

useEffect를 사용하는 방법은 크게 3가지로 나뉜다.

 

- 의존성 배열이 없는 경우

해당 컴포넌트가 re-Rendering 될 때 마다 useEffect가 실행된다.

따라서 비효율적이라고 할 수 있다.

 

- 의존성 배열이 있지만 내용이 비어있을 경우

의존성 배열이 빈 경우에는 컴포넌트가 마운트 될 때 한번만 실행되고 이후 랜더링 때 실행되지 않는다.

 

- 의존성 배열이 있는 경우

의존성 배열 내부의 요소가 업데이트 될 때마다 useEffect가 실행된다

 

 

useEffect를 통해서 마운트가 해제될 때 발생시키는 clean-up 함수를 구성할 수 있다

useEffect(()=>{

	return ()=>{
    	//cleanUp
    }
},[])

 

2. useReducer

먼저 Redux를 공부한 입장에서 useReducer는 Redux와 형태가 아주 비슷하다.

Redux가 전역상태관리를 한다면, useReducer는 단일 컴포넌트 내의 상태관리를 하는 것과 비슷했다.

 

useReducer는 복잡한 State를 관리하거나, 연관성있는 값들을 관리하는데 유용하다.

import React, { useReducer } from 'react';

// 리듀서 함수 정의
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  // useReducer 훅 사용
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return()
  }
  
  export default Counter;

 

리듀서 함수를 미리 정의하고 action type에 따른 동작을 구성한다. 이때 각 case의 return 값은 업데이트 되는 state 값이다. 사용을 위해서는 구조분해 할당을 통해 state와 dispatch를 가져온다. 이때 useReducer에는 상단에서 정의한 리듀서와 state 객체가 입력된다.

 

이러한 useReducer의 장점은 리듀서 함수 내부에서 로직을 구성하여 메인 코드는 간단하게 구성할 수 있다.

또한 연관된 state를 함께 묶어서 관리할 수 있다.