fetch + progress

fetch + progress

 

요약

• ArrayBuffer 다운로드 방식을 커스텀

예) react + fetch + progress

gzip encoding 시 content length 값 문제

Transfer-Encoding: gzip

증상:

• gzip encoding 시 content-length 는 압축된 데이터 크기이기 때문에 실제 데이터 보다 크기가 작다

우회:

• 요청 헤더에 Accept-Encoding 을 명시하여 gzip 방지
• 주의: 서버 구현에 따름

[React] useRef, useState, useReducer, useContext 사용례 비교

요약

• useRef 렌더링 X 변수 설정 필요한 경우 [컴포넌트]
• useState 렌더링 O 단순한 데이터 타입 [컴포넌트]
• useReducer 렌더링 O 복잡한 데이터 타입 (예: object), 복잡한 operation [컴포넌트]
• useContext 여러 컴포넌트에 걸쳐 공유하는 데이터, 함수 [Provider 하위]

useRef

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화되는 변수
• 렌더링 필요없는 경우

사용례

• 비디오 element 조작

 

useState

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
• 렌더링 필요한 경우
• 간단한 데이터 타입 (예: string, number, boolean 등)

사용례

• 간단한 계산기

 

useReducer

언제?

• 컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
• 렌더링 필요한 경우
• 복잡한 데이터 타입 (예: object 등)
• 데이터를 다루는 다양한 operation 필요한 경우

사용례

• fetch 데이터

 

useContext

언제?

• 여러 컴포넌트에 걸쳐 사용되며 한번 초기화 되는 변수

사용례

• 테마 설정
• 로그인 정보

[React] useImperativeHandle 사용 예

useImperativeHandle 사용하기

참고: https://react.dev/reference/react/useImperativeHandle

 

state, callback prop 대신 직접적으로 component 에 명령을 내릴 때 사용

예제) react + typescript

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

function App() {

  const mycomponent = useRef<MyComponentElement>();

  return (
    <div className="App">
      <MyComponent ref={ref => mycomponent.current = ref as MyComponentElement} />
      <div style={{ display: 'flex', gap: 3 }}>
        <button onClick={() => mycomponent.current?.play()}>Play</button>
        <button onClick={() => mycomponent.current?.pause()}>Pause</button>
        <button onClick={() => mycomponent.current?.stop()}>Stop</button>
        <button onClick={() => alert(mycomponent.current?.getState())}>Get State</button>
      </div>
    </div>
  );
}

type MyComponentElement = {
  play: () => void;
  pause: () => void;
  stop: () => void;
  getState: () => string;
};

type MyComponentProps = {
};

const MyComponent = forwardRef<MyComponentElement, MyComponentProps>((props, ref) => {
  const [state, setState] = useState<string>('idle');
  useImperativeHandle(ref, () => ({
    play: () => {
      setState('play');
    },
    pause: () => {
      setState('pause');
    },
    stop: () => {
      setState('stop');
    },
    getState: () => {
      return state;
    }
  }));
  return (
    <div>
      <p>state: {state}</p>
    </div>
  );
});

export default App;

설명

• 주로 forwardRef, useRef 와 함께 사용