인프런 커뮤니티 질문&답변

Won Ders님의 프로필 이미지

작성한 질문수

코드로 배우는 React with 스프링부트 API서버

동적페이지 이동

navigate 사용시 useCallback() 사용 여부가 궁금합니다.

24.06.08 22:41 작성

·

106

·

수정됨

0

  1. 지난 강의에서 LIST, ADD 클릭 할때와

  const handleClickList = useCallback(() => {
    navigate({ pathname: 'list' });
  }, []);

  const handleClickAdd = useCallback(() => {
    navigate({ pathname: 'add' });
  }, []);
  1. 지금 강의에서 moveToModify 클릭할 때

  const moveToModify = () => {
    navigate({ pathname: `/todo/modify/${tno}`, search: queryStr   });
};

useCallback() 사용 여부 차이가
동적으로 변할 여지가 있는 함수를 새로 호출하는게 맞아서 그런걸까요?(=${tno}의 변경 가능성?)

props로 써야할 것과 router로 써야할 것을 구분하라고 하셨습니다. 혹시 이것과 관련된 말씀이셨나요?

검색해도 명쾌히 이해가 가지 않습니다!!

 

 

답변 1

0

구멍가게코딩단님의 프로필 이미지
구멍가게코딩단
지식공유자

2024. 06. 09. 10:11

강의를 열심히 들어주셨네요. 감사합니다^^

 

useCallback( ) 의 목표는 컴포넌트가 새로 만들어 질때 마다 동일한 함수를 새로 만들지 않는다 입니다.

 

메뉴컴포넌트의 경우 메뉴의 링크가 변하는 일은 없기 때문에 useCallback( )을 이용하는게 의미가 있지만

 

조회 페이지에서 수정으로 넘어가는 경우는 매번 해당 링크가 변하기 때문에 굳이 이걸 새로 만들지 않고 유지할 필요가 없기 때문에 useCallback( )을 사용하지 않은 것입니다.

 

말씀하신대로 매번 tno값이 변경되어서 새로운 컴포넌트가 만들어지는 관계이기 때문입니다.

 

props 와 router의 문제는 이 문제만이 해당되는 것은 아닙니다만 변경되는 값이 기준이 되기 때문에 useCallback( )의 의존성을 사용할 때 주의해야 하는 기준이 됩니다.

 

어떤 분이 정리를 잘 해둔게 있어서 링크를 추가합니다.

https://5kdk.github.io/blog/2023/07/04/necessary-with-usememo-and-usecallback

 

 

Won Ders님의 프로필 이미지

작성한 질문수

질문하기