[React] 이미지 업로드, custom hook, 페이지 이동, props 관련 정리

1. 이미지 업로드

const onClickImageUpload = useCallback(() => {
    imageInput.current.click();
  }, [imageInput.current]);

<input type="file" multiple hidden ref={imageInput} />
        <Button onClick={onClickImageUpload}>이미지 업로드</Button>

2. hook으로 저장하여 커스텀 훅으로 사용

여기서 거의 핸들러 빼고 setter만 넣어서 value와 setter만 리턴하는 경우로 많이 쓴다.

import { useState, useCallback } from 'react';

export default (initValue = null) => {
  const [value, setter] = useState(initValue);
  const handler = useCallback((e) => {
    setter(e.target.value);
  }, []);
  return [value, handler, setter];
};

반응형

페이지 이동

페이지를 이동할 때 history.push를 썼었는데, 나의 경우에는 id나 pw를 찾기를 하고 이전 사이트로 돌아갈려고 하면 정보를 저장했던 것이라서 보안창이 떠야 한다. 그 경우 어찌해야하는지 잘 몰랐고, 또한 이전 페이지로 어떻게 하면 돌아갈 수 없는지에 대해서 자세히 몰랐다. 이번에 정리하면서 replace라는 기능을 알게 되서 써먹어 볼려고 한다.

push는 이전페이지로 돌아가기 가능

replace하면 이전 페이지로 돌아갈 수 없음

props을 특정 몇 개만 업데이트

function List({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  // 🔴 Avoid: Adjusting state on prop change in an Effect
  useEffect(() => {
    setSelection(null);
  }, [items]);
  // ...
}

items가 변경되었을때 selection 상태가 리셋되어야 하는 경우이다. items가 변경되면 -> 리렌더링 -> selection 변경 -> 리렌더링이걸 아래처럼 변경해보자.

function List({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  // Better: Adjust the state while rendering
  const [prevItems, setPrevItems] = useState(items);
  if (items !== prevItems) {
    setPrevItems(items);
    setSelection(null);
  }
  // ...
}

useState에 items 상태를 담고, prevItems와 items를 비교함으로 인해 리렌더링을 줄였다.