객체형태로 함수를 정의해서 사용하기 by gpt

응, 맞아! 한 컴포넌트 안에서 여러 개의 함수를 정의할 때, 객체를 활용해서 key-value 형태로 함수들을 저장하고 필요할 때 꺼내서 실행하는 방식으로 이해하면 돼.

이 방법은 코드를 깔끔하게 정리하고 유지보수를 쉽게 만들 수 있는 패턴이야.

---

예제 1: 함수들을 객체에 저장하고 호출하는 기본적인 패턴

const MyComponent = () => {
  // 함수들을 key-value 형태의 객체로 정리
  const handlers = {
    sayHello: () => console.log("Hello!"),
    sayGoodbye: () => console.log("Goodbye!"),
    alertMessage: (msg: string) => alert(msg),
  };

  return (
    <div>
      <button onClick={handlers.sayHello}>인사하기</button>
      <button onClick={handlers.sayGoodbye}>작별 인사</button>
      <button onClick={() => handlers.alertMessage("안녕하세요!")}>메시지 띄우기</button>
    </div>
  );
};

📌 설명

• handlers 객체를 만들어서 여러 개의 함수를 저장함.
• 버튼을 클릭할 때 객체에서 해당 키를 찾아서 실행하는 방식.
• handlers.alertMessage("안녕하세요!")처럼 파라미터가 필요한 함수도 쉽게 호출 가능.

---

예제 2: 상태(state)에 따라 동적으로 함수를 선택해서 실행

const MyComponent = () => {
  const [mode, setMode] = useState<"light" | "dark">("light");

  // 모드에 따라 실행할 함수를 객체로 정리
  const modeHandlers = {
    light: () => console.log("🌞 Light mode!"),
    dark: () => console.log("🌙 Dark mode!"),
  };

  return (
    <div>
      <button onClick={() => setMode("light")}>Light 모드</button>
      <button onClick={() => setMode("dark")}>Dark 모드</button>
      <button onClick={modeHandlers[mode]}>현재 모드 출력</button>
    </div>
  );
};

📌 설명

• modeHandlers 객체에 "light"과 "dark" 키로 각각의 모드에 맞는 함수를 저장함.
• modeHandlers[mode]()를 호출하면 현재 mode 상태에 맞는 함수가 실행됨.
• 이 방식은 조건문 없이 객체에서 바로 함수 선택이 가능해서 코드가 깔끔해짐.

---

예제 3: panelTypes와 비슷한 형태로 동적으로 컴포넌트를 선택하는 방식

const panelTypes = {
  Chart: () => <ChartPanel />,
  Quote: () => <QuotePanel />,
  Order: () => <OrderPanel />,
};

const MyComponent = ({ selectedPanel }: { selectedPanel: keyof typeof panelTypes }) => {
  const PanelComponent = panelTypes[selectedPanel]; // 해당 키에 맞는 함수 가져오기

  return (
    <div>
      {PanelComponent ? <PanelComponent /> : <div>선택된 패널이 없습니다.</div>}
    </div>
  );
};

📌 설명

• panelTypes 객체에 "Chart", "Quote", "Order" 등의 키와 컴포넌트를 반환하는 함수를 저장.
• selectedPanel 값에 따라 적절한 패널을 가져와서 렌더링.
• 이렇게 하면 조건문 없이 객체에서 바로 컴포넌트를 가져와서 렌더링 가능!

---

왜 이런 방식이 좋을까?

1. ✅ 코드가 깔끔해짐 → if나 switch문을 줄이고, 객체에서 직접 키로 값을 찾는 방식.
2. ✅ 확장성이 좋음 → 새로운 기능을 추가할 때 기존 로직을 수정할 필요 없이 객체에 추가만 하면 됨.
3. ✅ 재사용성이 높음 → 같은 패턴을 여러 곳에서 사용할 수 있음.

이런 방식은 이벤트 핸들러, 동적 컴포넌트 렌더링, 상태 기반 로직 처리 같은 다양한 상황에서 활용할 수 있어!
좀 더 이해되었을까? 😊

 

다 까먹었다.. 

이해안되는 부분 다시 묻기

 

이 부분을 하나씩 분석해볼게!

({ selectedPanel }: { selectedPanel: keyof typeof panelTypes })

이 구문은 TypeScript의 구조 분해 할당과 타입 정의가 결합된 형태야.
하나씩 뜯어보자.

---

1. 구조 분해 할당

({ selectedPanel }) 

이건 함수의 매개변수에서 객체의 특정 속성을 추출하는 문법이야.
즉, props 객체에서 selectedPanel이라는 값을 바로 꺼내오는 거지.

💡 예제

const MyComponent = (props: { selectedPanel: string }) => {
  console.log(props.selectedPanel);
};

<MyComponent selectedPanel="Chart" />;

// 위의 코드를 구조 분해 할당으로 변경하면
const MyComponent = ({ selectedPanel }: { selectedPanel: string }) => {
  console.log(selectedPanel); // "Chart"
};

이렇게 하면 props.selectedPanel 대신 그냥 selectedPanel로 접근 가능해서 편리해.

---

2. { selectedPanel: keyof typeof panelTypes }의 의미

이제 타입 부분을 뜯어보자.

① typeof panelTypes → panelTypes의 타입 가져오기

const panelTypes = {
  Chart: () => <ChartPanel />,
  Quote: () => <QuotePanel />,
  Order: () => <OrderPanel />,
};

• panelTypes는 객체야.
• typeof panelTypes를 사용하면 객체 자체의 타입을 가져올 수 있어.
  (예를 들어 typeof panelTypes는 { Chart: () => JSX.Element, Quote: () => JSX.Element, Order: () => JSX.Element } 형태가 됨.)

② keyof typeof panelTypes → panelTypes의 키들만 가져오기

keyof typeof panelTypes

• keyof를 붙이면 객체의 키들(= "Chart" | "Quote" | "Order")이 타입이 됨.
• 즉, "Chart" | "Quote" | "Order" 중 하나만 올 수 있음.

💡 예제

type PanelKeys = keyof typeof panelTypes;
// PanelKeys는 "Chart" | "Quote" | "Order" 타입이 됨

③ { selectedPanel: keyof typeof panelTypes }

이제 전체를 보면:

{ selectedPanel: keyof typeof panelTypes }

즉, selectedPanel은 "Chart" | "Quote" | "Order" 중 하나만 가질 수 있다는 뜻!

---

3. 최종 정리

({ selectedPanel }: { selectedPanel: keyof typeof panelTypes })

• props에서 selectedPanel을 구조 분해 할당함.
• selectedPanel의 타입은 "Chart" | "Quote" | "Order" 중 하나로 제한됨.

📌 정리하면 이런 형태야!

const MyComponent = ({ selectedPanel }: { selectedPanel: keyof typeof panelTypes }) => {
  const PanelComponent = panelTypes[selectedPanel]; // selectedPanel을 키로 사용해서 컴포넌트 가져오기
  return <PanelComponent />;
};

// 사용 예시
<MyComponent selectedPanel="Chart" />; // ✅ 가능
<MyComponent selectedPanel="Unknown" />; // ❌ 오류! (선택할 수 있는 키가 아님)

---

이 방식의 장점

✅ 1. 안전한 타입 체크

• "Chart" | "Quote" | "Order" 외의 값이 들어오면 오류 발생 → 실수 방지
  ✅ 2. 자동 완성 지원
• selectedPanel을 입력할 때 "Chart", "Quote", "Order"만 추천됨
  ✅ 3. 유지보수 편리
• panelTypes에 새로운 키가 추가되면 자동으로 타입에 반영됨

이제 좀 이해됐을까? 😊