목차

FE 폴더 구조

• /src
  • /components
  • /pages
  • /hooks
    • /queries: React Query 함수
    • useSomeHook.ts 는 차후에 폴더 묶기
  • /utils: 사이드 이펙트 없이 공통적으로 사용되는 함수
  • /mocks
  • /constants
• /public: 절대로 바뀌지 않을 자원들
  • **.png

callback 함수 네이밍

함수의 역할로 작성하기!

handle~ 대신 increment10과 같은 직관적인 네이밍

function Item({ onClick }: { onClick: () => void }) {
  return <div onClick={onClick}>123</div>;
}
function App() {
  const [count, setCount] = useState(0);

  const increment10 = () => {};

  return (
    <>
      <Item onClick={increment10} />
    </>
  );
}

boolean 함수/변수

• clicked: 변수이름
• isClick: 함수이름

컴포넌트 폴더 작성 방식

• index에서는 import, export만
• 내부에 다른 파일에서 컴포넌트 작성