TIL : getBoundingClientReact, React 내장 훅, 함수형 컴포넌트

Chanho Yoon·2021년 5월 26일

getBoundingClientRect useCallback useImperativeHandle useLayoutEffect useMemo useReducer 함수형 컴포넌트

기억보단 기록

목록 보기

4/8

오늘의 기록들

✅ getBoundingClientRect()

요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.

getRect = element.getBoundingClientRect();

✅ React 내장 훅

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

메모이제이션된 값을 반환한다.
첫 번째 인자로는 함수, 두 번째는 의존성 값의 배열을 전달한다.
의존성이 변경되었을 때만 첫 번째 인자에 전달한 함수가 실행된다.
즉, 의존성이 변경되지 않았다면 이전에 실행해서 가지고 있던 값을 재활용하는 것이다.

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

메모제이션된 콜백을 반환한다.
useMemo와 비슷하지만 함수 메모이제이션에 특화된 훅!!

만약에 어떠한 함수가 렌더링이 되고 한 번만 생성하면 되는데 컴포넌트가 렌더링 될 때마다 함수를 재생성하게 된다면 비효율적이므로 그 함수를 useCallback을 사용하여 특정한 값이 변경되었을 때만 생성되도록 하는 것이 바람직하다.
그리고 만약 그러한 함수가 useEffect 부수효과 함수안에서 사용이 된다면 의존성 배열에 해당하는 함수를 넣어줘야한다.

useReducer

useState의 대체 함수로

const [state, dispatch] = useReducer(reducer, initialState);

와 같이 사용합니다.
여러 개의 상태값을 관리할 때는 useReducer hook을 사용하는게 좋다.

state : 상태값
dispatch : 상태값을 변경할 수 있는 함수
reducer : 매개변수로 여러 개의 상태값을 변경할 때 type으로 무엇을 변경할 것인지를 결정짓는 함수
initialState : 초기값

<input type="text" value={state.name} onChange={e => 
  dispatch({type: 'setName', name: e.currentTarget.value})
...
function reducer (state, action) {
  switch (action.type) {
    case 'setName':
      return { ...state, name: action.name };
    case 'setAddress':
      return { ...state, address: action.address };
  }
}

useReducer로 상태값을 관리하고, contextAPI로 상태값이나 dispatch 함수를 내려주면 조금 더 효율적인 상태 관리를 할 수 있다.

useImperativeHandle

클래스형 컴포넌트의 부모 컴포넌트는 ref 객체를 통해서 자식 컴포넌트의 메서드를 호출할 수 있다.

useImperativeHandle hook을 사용하면 함수형 컴포넌트에서도 자식 컴포넌트에서 재공한 메서드를 호출해서 사용할 수 있다. 하지만 그 전에 자식 컴포넌트에 forwardRef(function name)와 같이 사용해야한다.

useLayoutEffect

useEffect와 비슷하게 동작하지만 useLayoutEffect는 모든 DOM이 변경된 후에 동기적으로 발생한다. 공식 문서에서는 "DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용하세요" 라고 한다. 즉 렌더링 결과가 DOM에 반영된 직후 바로 호출된다.

useLayoutEffect훅의 부수효과 함수에서 연산을 많이하게 될 경우 브라우저가 먹통이 될 수도 있으니 조심해야한다.

useLayoutEffect는 언제 사용??

렌더링 직후 DOM element 값을 읽어들이는 경우
조건에 따라서 컴포넌트를 다시 렌더링 하고 싶은 경우

useLayoutEffect 실행되는 시점
일반적인 경우 : 리액트 렌더링 -> DOM에 반영 -> 브라우저 화면에 그림
useLayoutEffect : 리액트 렌더링 -> DOM에 반영 -> useLayoutEffect 실행 -> 브라우저 화면에 그림

✅ 함수형 컴포넌트!

함수형 컴포넌트는 단순히 함수이고, jsx를 반환하는 함수이다.

jsx란 HTML 문법을 JavaScript 코드 내부에 쓴 것,
자바스크립트 안에서 HTML을 사용해 view를 구성할 수 있게 도와주는 자바스크립트 문법으로 결국엔 babel에 의해 자바스크립트로 변환된다.
어떠한 이유로 컴포넌트(함수)를 호출하여 실행하게 되면 컴포넌트는 렌더링을 하게 되는데 그때 함수 내부에 있던 변수, 함수도 매번 다시 새롭게 할당되어 사용된다.
자기 자신의 state(상태)가 변경되거나, 부모 컴포넌트로 받은 props가 변경되면 리렌더링 된다.

리액트 문서