재호팀 컨벤션 - prgrms-fe-devcourse/FEDC2_Shallenge_Jaeho GitHub Wiki

컴포넌트 코드 컨벤션

| 코드의 통일성, 가독성을 위한 컴포넌트 컨벤션 정의을 했습니다

1. import 정렬

  • eslint가 자동화

2. "Props" interface 사용하기

  • 컴포넌트 props 타입은 interface로 정의
  • 이름은 "Props"로 통일

3. 컴포넌트는 아래 형식으로 통일

  • const Component = () => { }

4. CSS 스타일링

  • Chakra UI 라이브러리를 사용하는 경우에는 in-line으로 스타일링
  • emotion을 사용하는 경우에는 export default 아래에 코드를 작성

5. 네트워크 요청 작업은 fetch, axios 대신 react Query 사용

  • useQuery를 사용할지 useMutation을 사용할지는 기준은 논의 후 결정

6. 반복되는 useQuery는 커스텀 훅으로 분리하여 사용

  • 한 번만 사용되는 경우에는 직접 useQuery를 호출하여 사용

7. 복잡한 useState, useEffect는 커스텀 훅으로 분리하여 사용

컴포넌트 예시

import { Avatar, Box, Flex, Heading, Text } from "@chakra-ui/react";

// import 정렬 : eslint로 자동화

interface Props{

}
// "Props" 인터페이스 사용

// const 컴포넌트 형식 
// function 형식(X)
const Comment = ( props: Props) => {
  return (
     <> </>
  );
};

export default Comment;


// style 코드는 가장 아래에
const style = emotion.div``;
⚠️ **GitHub.com Fallback** ⚠️