# 2020.06월

# 6월 이슈 요약

  • react native || Flutter 기반 하이브리드 웹앱 시작
  • react로 웹뷰 리드
    • 프로젝트 구조
    • 로직 일괄 작업

# 에러 해결 모음

# 1. Can't perform a React state update on an unmounted component.

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
  • route 이동후 이전 route에서 값을 변경하는 경우 뜨는 메세지
const changePassword = async () => {
  const params = {
    ...passwordData,
    user_account: {
      password: text.confirmPassword
    }
  };
  try {
    setLoading(true);
    const res = await apis.auth.changePassword(
      passwordData.user_id,
      _.omit(params, ["step", "user_id"])
    );
    setLoading(false);
    if (res.status === 200) {
      history.push({
        pathname: "/success",
        state: {
          title: "비밀번호 찾기 완료",
          body: "회원님의 비밀번호가 성공적으로 변경되었습니다."
        }
      });
    }
  } catch (e) {
    alert(e.response.data.message);
    setLoading(false);
  } finally {
    setLoading(false);
    // route이동 후, 실행되기에 위 에러가 뜬다
  }

  // finally 문을 router이동 전으로 옮긴다.
};

# 2. a tag 사용시 redux가 초기화 됨

  • a tag 속성이 브라우저를 새로고침하면서 이동하기 때문
  • react router의 link는 브라우저를 새로고침하지 않고 url을 이동하기에 redux의 state가 유지된다.
  • 정리 (opens new window)

# 3. 체크박스 with label

  • id랑 htmlFor 값을 동일하게 맞추면 라벨을 눌렀을때 onChange 실행됨
<input type="checkbox" id="check3" onChange={onCheckBox} /> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label

# 4. React.memo에서 특정 props만 비교하여 리렌더링 제어

  • 전달받는 prop이 객체인 경우 deep comparison을 수행하거나, 여러개 중 특정 prop의 변화만을 고려하기 위해 아래와 같이 구현할 수도 있습니다.
const equalComparison = (prevProps, nextProps) =>
  prevProps.notiParams.min_id === nextProps.notiParams.min_id;

export default React.memo(NotificationPresenter, equalComparison);

# 5. useEffect 내부에서 props, state를 사용 할 경우 dependency를 추가해 줘야한다.

# 6. dispatch 잘못된 형식으로 실행

  • 아래와 같이 실행하면 뜬다. dispatch 내부의 값이 함수인데 객체로 실행한 경우 뜨는 에러
Actions must be plain objects. Use custom middleware for async actions
dispatch(thisIsFunction);
  • 아래와 같이 고친다
dispatch(thisIsFunction());

# 7. render에 영향을 안미치고 즉시 바뀌는 값(flag?)이 필요한 경우

# 배운점

# 1. react-hook

# 2. styled-components

# 3. immer

# 4. props-types

  • typescript로 변환하여 더이상 쓰지 않음 (20_08_27)

# 5. react project 구조

# 6. time localization

  • ping으로 서버시간 받고, 현재 로컬 시간 가져와서 둘의 시간 차이 빼서, 로컬에 저장
  • 서버로 부터 시간에 관한 값을 가져오면 무조건 로컬에 저장된 차이 시간 값을 조정하여 사용자에게 보여줌
  • 정리 (opens new window)

# 7. redux-saga

최근변경일: 6/23/2022, 11:25:42 AM