api 문서 state hooks ~ ref hooks

너무 자주 재계산하는 것이 걱정된다면, useMemo훅을 사용하면 도움이 될 수 있습니다.
useReducer와 useState는 매우 유사한 구조로 되어있을듯 하다. 생성된 state를 관리하는(업데이트) 부분은 동일할 것이고 단지 setState하는 부분을 reducer에서 가져오는 차이만 있을 것 같습니다.
React는 context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링합니다. 사이에 있는건들은 안건드린다.
컨텍스트 중첩 아이디어
컨텍스트에서 함수 메모이제이션 사용한다.(1과 유사하게 초기화는 렌더마다 호출은 되니까!)
초기화를 제외하고는 렌더링 중에 ref.current를 쓰거나 읽지 마세요. 이렇게 하면 컴포넌트의 동작을 예측할 수 없게 됩니다. 이펙트나 이벤트핸들러 내부에서만 쓰세요,
useRef를 초기화할 때 타입 검사기를 사용하면서 항상 null을 검사하고 싶지 않다면 외부에서 조건문을 쓰거나 getter를 만들어서 쓸 수는 있음

리렌더링의 조건으로서 사용되는 값의 경우에(5번), 리렌더링을 줄이기위해 useMemo를 쓰는 것이 좋다. 하지만 너무 자주 재계산하는 것이 걱정되는 커다란 함수의 경우엔, 대부분 그렇지 않다.

useState

대부분의 경우, 이 두 가지 접근 방식 사이에는 차이가 없습니다. React는 클릭과 같은 의도적인 사용자 액션에 대해 항상 다음 클릭 전에 age state 변수가 업데이트 되도록 합니다. 즉, 클릭 핸들러가 이벤트 핸들러를 시작할 때 “오래된” age를 볼 위험은 없습니다.

여러번 연속으로 클릭할 때 다음 state로 이벤트핸들러가 호출될지 보장하나?

보장 안 한다.

function handleClick() {
    setTimeout(() => {setCount(a => a + 1)}, 1000)
  }

  function handleClick() {
    setTimeout(() => {setCount(count + 1)}, 1000)
  }

만약 어떤 state가 다른 state 변수의 이전 state로부터 계산되는 경우라면, 이를 하나의 객체로 결합하고 reducer를 사용하는 것이 좋습니다.

두 개의 state가 같이 움직여야 되는 상황이면 하나의 state로 모은다고 생각하면 될까? reducer를 사용하는 것과는 또 다른 얘기가 아닐지..?

prop이 변경될 때 state를 변경해야 하는 경우

대부분 이 기능이 필요하지 않다.

필요한 값을 props나 다른 state에서 모두 계산할 수 있는 경우 중복되는 state를 모두 제거해라.
전체 컴포넌트 트리의 state를 재설정하려면 컴포넌트에 다른 key를 전달해라.
가능하다면 이벤트 핸들러의 모든 관련 state를 업데이트 해라.
컴포넌트가 렌더링 되는 동안 set 함수를 호출해서 지금까지 렌더링된 값을 기반으로 state를 업데이트 해라. 이것이 effect에서 업데이트 하는 것보다는 낫다.

useReducer

Immer를 사용하는게 일반적인가?

세번째 매개변수로 init 함수를 넣는 경우도 있구나

useContext

value에 객체 넣을 때 useMemo 사용

useRef

외부에 설정한 let과 useRef가 다른 점?

각각의 컴포넌트에서 공유되지 않는다.

이게 더 best practice라네...

function Video() {  

    const playerRef = useRef(null);  

    if (playerRef.current === null) {  

    playerRef.current = new VideoPlayer();  

}  

// ...

useImperativeHandle

useImperativeHandle은 ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해주는 React 훅입니다.

const MyInput = forwardRef(function MyInput(props, ref) {  

    useImperativeHandle(ref, () => {  

        return {  

        // ... your methods ...  

        // ... 메서드는 여기에 작성합니다 ...  

        };  

    }, []);

얘는 타입스크립트 다 지원하나?

이렇게 fowardRef의 타입을 지정해주면 되는구만

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

interface CustomInputHandle {
  focus: () => void;
}

const CustomInput = forwardRef<CustomInputHandle, {}>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
  }));

  return <input ref={inputRef} />;
});

flagtags / react-study

리액트 스터디 6 #6

useState

useReducer

useContext

useRef

useImperativeHandle