- useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
- 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태
기본적으로 첫 번째 파라미터(함수)가 렌더링된 직후 실행
마운트될 때만 실행하고 싶을 때 (업데이트 될 때는 실행 X) → 두 번째 파라미터로 비어있는 배열을 넣어줌
특정 값이 업데이트될 때만 실행하고 싶을 때→ 두 번째 파라미터에 의존 배열(deps)를 넣어줌
사용 예시
category의 값이 바뀔 때마다 뉴스를 새로 불러와야 하기 때문에 useEffect의 의존 배열에 category를 넣어 줌
Memo, “memoized”, 이전에 계산한 값을 재사용한다는 의미.
함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있음.
첫 번째 파라미터에 함수(어떻게 연산할지 정의)를 넣어줌. 두 번째 파라미터에 deps 배열 (어떤 값이 변할 때 새로 호출해야 하는지 명시)을 넣어줌.
useMemo는 특정 결과값을 재사용할 때 사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
- useMemo와 비슷한 Hook
- 주로 렌더링 성능을 최적화해야 하는 상황에 사용하며, 특정 함수를 새로 만들지 않고 재사용하는 기능을 함.
- useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용
- 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수
첫 번째 파라미터: reducer 함수, 두 번째 파라미터: reducer의 기본 값 (initialState)
state: 현재 가리키는 상태, dispatch: 액션을 발생시키는 함수
reducer 함수: 현재 상태(state)와 액션 객체(action)를 파라미터로 받아와서 새로운 상태를 반환해주는 함수
알아갑니다