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

안녕하세요 신지연님 이정환입니다.

답변에 앞서 "리로딩" -> "리렌더링"을 말씀하시는 거라고 이해하고 답변드리겠습니다.

(혹시 아니라면 말씀주세요!)

강의에서 안내드린 상황만 딱 고려 하자면 최종적으로는 useMemo만 사용하셔도 됩니다. Context.Provider 컴포넌트에게 Props로 전달되는 값은 useMemo로 최적화된 memoziedDispatch이므로 굳이 함수를 중복으로 useCallback을 이용해 최적화 하실 필요는 없습니다.

추가적으로 함수를 만들때 카멜과 파스칼 표기법을 번갈아 사용한 이유에 대해서 질문주셨는데요

아마 질문하신 포인트가 컴포넌트를 만들때에는 파스칼로, 컴포넌트가 아닌 일반적인 함수를 만들때에는 카멜 표기법으로 사용한 이유에 대해서 물어보신것 같은데 맞으시겠죠?! 컴포넌트 함수 외에는 모든 함수를 다 카멜 표기법으로 작성하고 있기 때문에 맞다고 생각하고 답변드리겠습니다.

컴포넌트만 파스칼 표기법을 사용한 이유는 JSX 문법 때문입니다.

JSX에서는 컴포넌트로 사용될 함수의 이름을 반드시 대문자로 시작하도록 강제하고 있습니다. 이는 우리 강의의 5.2) React 컴포넌트 챕터의 2분 15초 경에 자세히 설명해드리고 있으니 참고하시면 좋겠습니다.

안녕하세요, 인프런 AI 인턴입니다. 신지연님.

리액트에서 useCallback과 useMemo는 특정 상황에서 각각의 역할을 합니다. useCallback은 특정 함수가 불필요하게 재생성되는 것을 방지하기 위한 것이며, useMemo는 특정 값의 계산을 캐싱하여 불필요한 계산을 방지합니다. 둘을 함께 사용할 경우, useCallback으로 함수의 재생성을 막고, useMemo로 값 자체의 재생성을 막아 최적화를 극대화하는 것이 가능할 때도 있습니다.

하지만 모든 경우에 두 훅을 중복으로 사용하는 것이 반드시 필요한 것은 아닙니다. 특정 상황에 맞춰 적절히 사용하는 것이 중요합니다. 함수 자체가 변경되지 않는다면 useCallback만으로도 충분할 수 있으며, 객체나 리스트 등이 변하지 않아야 한다면 useMemo를 사용하는 것이 좋을 수 있습니다.

다음과 같은 게시물들이 신지연님의 궁금증을 해결하는 데 도움이 될 수 있습니다:

1. Context 질문드립니다.
   이 게시물에서는 useCallback과 useMemo를 함께 사용하는 것에 대한 고민을 다루고 있으며, 두 훅의 사용 이유를 자세히 설명합니다.

2. context, 최적화 관련 질문
   이 질문에서는 DispatchContext에서의 최적화와 관련하여 useMemo의 사용 여부에 대한 논의가 이루어졌습니다.

또한, 함수 표기법에 대한 질문에 답변드리자면, 카멜표기법(camelCase)과 파스칼표기법(PascalCase)는 일반적으로 각각의 용도에 따라 선택됩니다. 보통 JavaScript에서 함수와 메서드는 카멜표기법을 사용하며, 클래스나 컴포넌트의 경우 파스칼표기법을 사용하는 것이 일반적입니다. 이 규칙은 코드의 일관성과 가독성을 높여 주기 때문에 많이 활용됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.