두서없이 작성된 내용이며 그날그날 배운 내용을 노트에 정리한 글입니다. 😀

useState()

• 첫 번째 요소 : 상태 값
• 두 번째 요소
  : 상태를 설정하는 함수, 이 함수를 파라미터로 넣어서 호출하면 전달 받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리런더링 됨
• 하나의 상태만 관리할 수 있음

useEffect()

• 리액트 컴포넌트가 리렌더링될 때마다 특정 작업을 수행하도록 설정
• 클래스형 컴포넌트에선 componentDidMount 와 componentDidUpdate 를 합친 형태
• 마운트될 때만 실행하려면 두 번째 파라미터에 비어있는 배열[] 넣기

뒷 정리 (cleanup)

• 컴포넌트가 언마운트 되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶을 때 useEffect 에서 cleanup 함수 반환
• 렌더링될 때마다 cleanup 함수 나타남, 업데이트 직전의 값을 보여 줌
• 오직 언마운트될 때만 cleanup 함수 호출하고 싶을 땐, 두 번째 파라미터에 비어있는 배열 넣기

useReducer()

• useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용
• 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수
• 새로운 상태를 만들 때 반드시 불변성 유지
• 액션 객체는 객체나 문자열, 숫자여도 상관 없음

첫 번째 파라미터

• 리듀서 함수, state 와 dispactch 함수를 받아옴
• state
  : 현재 가리키는 상태
• dispatch
  : 액션을 발생시키는 함수 dispatch(action), 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출

두 번째 파라미터

• 해당 리듀서의 기본 값

장점

• 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

인풋 상태관리

• useReducer 를 활용하면 기존 클래스형 컴포넌트에서 했던 e.target.name 방식과 유사하게 구현 가능

useMemo()

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. (값을 캐싱)
• ex).
  렌더링하는 과정에서 특정 값이 바뀌었을 떄만 연산을 실행,
  원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용

useCallback()

• ❗️무조건 습관적으로 사용하는 것 보다, 실질적으로 최적화를 할 수 있는 상황에서만 사용하는 것이 좋다.
• 주로 렌더링 성능을 최적화 해야 하는데 상황에서 사용, (함수 캐싱)
• 이 Hook 사용 시 만들었놨던 함수를 재사용할 수 있음
• 리렌더링 되는 함수가 많아질 때 최적화 시킬 때 효과적임
• 컴포넌트가 리렌더링될 때 마다 새로 만들어진 함수를 사용
• 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용하게 함
  (배열에 값을 넣으면 그 값이 바뀌거나 추가될 때 마다 새로 만들어진 함수를 사용)

첫 번째 파라미터

• 생성하고 싶은 함수

두 번째 파라미터

• 배열, 이 배열에는 어떤 값이 바뀔 때 함수를 새로 생성하는지 명시, 단 비어있는 배열은 컴포넌트가 렌더링될 때 단 한번만 함수 생성
  ❖ 주의 : 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함

useCallback 은 결국 useMemo 로 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 Hook

• 숫자, 문자열, 객체 처럼 일반 값은 재사용 -> useMemo()
• 함수를 재사용 -> useCallback()

useRef()

• 함수형 컴포넌트에서 ref 를 쉽게 사용할 수 있도록 해줌
• 렌더링과 관련되지 않은 값만 괄리할 때만 사용