작성한 질문수 1

2

안녕하세요 🙂

React에서 함수 정의 위치에 관한 질문에 답변드리겠습니다.

React에서 함수를 정의하고 관리하는 위치는 프로젝트의 구조와 목적에 따라 달라질 수 있습니다. 일반적으로 다음과 같은 접근 방식이 사용됩니다:

1. 컴포넌트 로컬 함수: 해당 컴포넌트에서만 사용되는 함수라면, 컴포넌트 내부에 직접 정의하는 것이 가장 좋습니다.

2. 상위 컴포넌트에서 정의 및 Props로 전달: 질문하신 것처럼, B 컴포넌트 안에 A 컴포넌트가 있고 A에서 이벤트 핸들러가 필요하다면, 특히 그 함수가 B의 상태를 변경해야 한다면 B에서 정의하고 props로 전달하는 것이 적절합니다.

3. 공통 상위 컴포넌트: 여러 컴포넌트에서 동일한 함수를 사용해야 한다면, 공통 부모 컴포넌트에서 정의한 후 필요한 자식 컴포넌트들에 props로 전달하는 것이 React의 단방향 데이터 흐름 원칙에 맞습니다.

하지만 프로젝트가 커지면서 props drilling 문제가 발생할 수 있습니다. 이를 해결할 수 있는 더 확장 가능한 패턴들이 있습니다:

1. Context API: 여러 컴포넌트에서 공유해야 하는 함수가 있다면, Context를 사용하여 함수를 제공할 수 있습니다.

   const FunctionContext = React.createContext();
   
   function FunctionProvider({ children }) {
     const sharedFunction = () => {
       // 로직
     };
     
     return (
       <FunctionContext.Provider value={{ sharedFunction }}>
         {children}
       </FunctionContext.Provider>
     );
   }
   

2. Custom Hooks: 재사용 가능한 로직을 custom hook으로 분리하여 여러 컴포넌트에서 사용할 수 있습니다.

   function useSharedFunctionality() {
     const handleEvent = () => {
       // 로직
     };
     
     return { handleEvent };
   }
   

3. 유틸리티 함수: 순수 함수(상태나 라이프사이클에 의존하지 않는 함수)의 경우, 별도의 유틸리티 파일에 정의하고 필요한 컴포넌트에서 import하여 사용할 수 있습니다.

   // utils/functions.js
   export function formatData(data) {
     // 로직
   }
   
   // Component.jsx
   import { formatData } from '../utils/functions';
   

대규모 프로젝트나 복잡한 애플리케이션에서는 상태 관리 라이브러리(Redux, MobX, Zustand, Jotai 등)를 사용하여 함수와 상태를 함께 관리하는 방법도 고려할 수 있습니다.

결론적으로, 함수의 용도와 범위에 따라 적절한 위치를 선택하는 것이 중요합니다:

• 단일 컴포넌트용 → 컴포넌트 내부

• 부모-자식 관계의 함수 → 부모에서 정의하고 props로 전달

• 여러 컴포넌트에서 공유되는 함수 → Context API, Custom Hooks, 또는 유틸리티 파일