함수 정의 위치

안녕하세요!

React로 프로젝트를 진행할 때 여러 함수들(이벤트 핸들러나 로직 처리 함수 등)을 구현하게 되는데,
이런 함수들을 어느 위치에서 정의하고 관리하는 것이 좋은지 궁금합니다.

예를 들어, B 컴포넌트 안에 A 컴포넌트가 있고, A에서 어떤 이벤트 함수가 필요하다면
그 함수를 B에서 정의하고 props로 A에 전달하는 식으로 처리하는 것이 React에서 일반적인 방식인가요?

그리고 만약 그 함수가 여러 컴포넌트에서 재사용되어야 한다면,
이들 컴포넌트의 공통 상위 컴포넌트까지 올라가서 정의한 후 각 컴포넌트에 전달하는 방식이 맞는지도 궁금합니다.

혹시 더 좋은 구조나 패턴이 있다면 조언 주시면 감사하겠습니다!

안녕하세요 🙂

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

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

컴포넌트 로컬 함수: 해당 컴포넌트에서만 사용되는 함수라면, 컴포넌트 내부에 직접 정의하는 것이 가장 좋습니다.
상위 컴포넌트에서 정의 및 Props로 전달: 질문하신 것처럼, B 컴포넌트 안에 A 컴포넌트가 있고 A에서 이벤트 핸들러가 필요하다면, 특히 그 함수가 B의 상태를 변경해야 한다면 B에서 정의하고 props로 전달하는 것이 적절합니다.
공통 상위 컴포넌트: 여러 컴포넌트에서 동일한 함수를 사용해야 한다면, 공통 부모 컴포넌트에서 정의한 후 필요한 자식 컴포넌트들에 props로 전달하는 것이 React의 단방향 데이터 흐름 원칙에 맞습니다.

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

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

const FunctionContext = React.createContext();

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

Custom Hooks: 재사용 가능한 로직을 custom hook으로 분리하여 여러 컴포넌트에서 사용할 수 있습니다.
```
function useSharedFunctionality() {
  const handleEvent = () => {
    // 로직
  };
  
  return { handleEvent };
}
```
유틸리티 함수: 순수 함수(상태나 라이프사이클에 의존하지 않는 함수)의 경우, 별도의 유틸리티 파일에 정의하고 필요한 컴포넌트에서 import하여 사용할 수 있습니다.
```
// utils/functions.js
export function formatData(data) {
  // 로직
}

// Component.jsx
import { formatData } from '../utils/functions';
```

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

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

단일 컴포넌트용 → 컴포넌트 내부
부모-자식 관계의 함수 → 부모에서 정의하고 props로 전달
여러 컴포넌트에서 공유되는 함수 → Context API, Custom Hooks, 또는 유틸리티 파일

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