[React 공부] 함수형 컴포넌트의 Hooks

아래글의 과정을 따라하며 필요한 내용 정리

 

1장. 리액트 입문 · GitBook

 

---

useRef

1. 특정 DOM 선택 가능
2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리
useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트도 리렌더링 되는 것 X

const a = useRef(4);
a.current += 1;     // 5

useMemo

특정 결과값을 재사용할 때 사용
첫번째 파라미터에는 객체를 반환하는 팩토리 함수를 넣어줘야 함.

useMemo(() => { }, [ ]);

 

useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
useMemo를 기반으로 만들어졌음

useCallback(() => { }, [ ]);

 

React.memo

컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링 하도록 설정 가능
그냥 React.memo()로 감싸기만 하면 됨

// 내보낼 때
export default React.memo(UserList);
// 안에서 쓸 때
const User = React.memo(function User({ user }) {…});

* 렌더링 최적화하지 않을 컴포넌트에 사용하면 불필요한 props 비교만 하므로 실제로 렌더링 방지 가능한 상황에서만 사용
* 두번째 파라미터에 propsAreEqual 이라는 함수를 이용해 특정 값들만 비교 가능 export default React.memo( UserList, (prevProps, nextProps) => prevProps.users === nextProps.users );
=> 하지만 잘못 사용하면 버그 발생하기 쉬우므로 유의

▶ useCallback, useMemo, React.memo는 컴포넌트의 성능을 실제로 개선할 수 있을 때만 사용해야 함.
ex) 리렌더링을 막을 수 있는 상황

함수형 업데이트

useState 를 사용할 때 state를 업데이트하는 setState 관련 함수에서 최신의 state를 사용하게 하는 방식이다. useState는 성능을 높이기 위해 비동기로 작동하는 Hook이기 때문에 예상과 다르게 동작할 때가 있는데, 함수형 업데이트를 사용하면 최신의 state를 가져와 업데이트하기 때문에 의도대로 동작시키는 데에 도움이 된다.

useCallback의 두번째 인자인 [deps] 에도 useState에서 관리하는 users 를 넣지 않고 useState 쪽의 setUsers와 같은 함수의 파라미터에서 최신 users를 참조할 수 있다.

=> useCallback 안에서 setTodo(todo => ({ …todo, done: !todo.done }) 처럼 set함수에 업데이트 해주는 함수를 넣으면 useCallback의 두번째 파라미터인 deps 배열에 todo 등의 인자를 넣지 않아도 된다.

useState

상태 업데이트할 때 새로운 상태 설정

useReducer

컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능 (ex. 컴포넌트 바깥에 작성, 다른 파일에 작성 후 불러와서 사용)
reducer: 현재 상태와 액션 객체를 파라미터로 받아 새로운 상태를 반환.
action은 업데이트를 위한 정보를 갖고 있음 - 주로 type값을 지닌 객체 형태로 사용하지만 필수 규칙은 아님
type 프로퍼티를 통해 switch 문으로 분기
const \[state, dispatch\] = useReducer(reducer, initialState); => reducer 함수, 초기 상태(객체)
dispatch는 액션을 발생시키는 함수. dispatch({type: ‘INCREMENT’}); 처럼 사용
reducer 함수에서 새로운 상태를 만들 때는 불변성을 지켜야 함 spread 연산자(…state) 사용

▶ 컴포넌트에서 관리하는 값이 하나면 useState가 편할 것.
컴포넌트에서 관리하는 값이 여러개가 돼서 상태의 구조가 복잡해지면 useReducer가 편할 수 있음. 맘에 드는 방식 사용