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

import FirstCount from "./firstCount";
import SecondCount from "./secondCount";
import { useState } from "react";

export default function Main() {
  const [count, setCount] = useState(0);

  const handleSetCount = () => {
    setCount((prev: number) => prev + 1);
  };

  return (
    <>
      <h1>Main Component</h1>

      <FirstCount count={count} setCount={handleSetCount} />
      <SecondCount count={count} setCount={handleSetCount} />
    </>
  );
}

import type { MouseEventHandler } from "react";

interface FirstCountProps {
  count: number;
  setCount: MouseEventHandler<HTMLButtonElement>;
}

export default function FirstCount({ count, setCount }: FirstCountProps) {
  return (
    <>
      <h1>firstCount Component</h1>
      {count}
      <button onClick={setCount}>increase</button>
    </>
  );
}

import type React from "react";

interface SecondCountProps {
  count: number;
  setCount: React.MouseEventHandler<HTMLButtonElement>;
}

export default function SecondCount({ count, setCount }: SecondCountProps) {
  return (
    <>
      <h1>secondCount Component</h1>
      {count}
      <button onClick={setCount}>increase</button>
    </>
  );
}

맨 위에 코드가 부모컴포넌트인데 부모컴포넌트에서 증가 함수를 정의하고 그 아래에 props로 내려주는 패턴은 잘 쓰이지 않는 패턴인가요?

강의에서는 각 자식 컴포넌트에서 카운트 증가 로직이 있어서 중복되는거 같아요

그래서 부모에 하나로 정의하고 props로 내려주었는데 어느게 맞는 패턴인가요?