TSX에서의 코드 컨벤션

목차

 

 

 파일 및 폴더구조

• 폴더 구조 : 컴포넌트는 기능별 또는 도메인 별로 폴더를 구성한다.

src/
  components/
    Header/
      Header.tsx
      Header.styles.ts
      Header.test.tsx
    Button/
      Button.tsx
      Button.styles.ts
      Button.test.tsx
  pages/
    Home/
      Home.tsx
      Home.styles.ts
      Home.test.tsx

 

 네이밍 컨벤션

 

파일명

• 컴포넌트 파일은 PascalCase를 사용한다.
• `Header.tsx`, `Button.tsx`

컴포넌트 명

• 컴포넌트 이름도 PascalCase를 사용한다.
• `const MyComponent: React.FC = () => {...}`

 

 임포트 순서

 

순서 : 임포트는 다음 순서로 정리한다.

1. React 및 주요 라이브러리
2. 서드파티 라이브러리
3. 프로젝트 내 라이브러리
4. 스타일 파일

예시

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import { Button } from 'antd';
import { fetchUser } from '../../api/user';
import './Button.styles.ts';

 

 컴포넌트 정의

 

함수형 컴포넌트  : 함수형 컴포넌트를 기본으로 사용한다.

const MyComponent: React.FC = () => {
  return <div>My Component</div>;
};

 

Props 타입 정의 : Props의 타입은 별도로 정의한다.

interface MyComponentProps {
  title: string;
  isVisible: boolean;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, isVisible }) => {
  return <div>{isVisible && title}</div>;
};

 

 스타일 컴포넌트(styled-components)

 

스타일 컴포넌트

• 스타일 컴포넌트를 사용할 때는 별도의 파일로 분리한다.
• `MyComponent.styles.ts`

import styled from 'styled-components';

export const Container = styled.div`
  padding: 20px;
  background-color: #f0f0f0;
`;

 

 상태 및 이벤트 핸들링

 

상태 정의

• `useState`, `useReducer`를 사용하여 상태를 관리한다.

const [count, setCount] = useState(0);

 

이벤트 핸들러

• 이벤트 핸들러는 `handle`로 시작하는 함수명으로 정의한다.

const handleButtonClick = () => {
  setCount(count + 1);
};

 

 조건부 렌더링

• 삼항 연산자 또는 && 연산자를 사용한다.

return (
  <div>
    {isVisible ? <VisibleComponent /> : <HiddenComponent />}
    {isVisible && <VisibleComponent />}
  </div>
);

 

 테스트

• 컴포넌트 파일과 동일한 폴더에 테스트 파일을 작성한다.
• `MyComponent.test.tsx`

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent', () => {
  render(<MyComponent title="Test Title" isVisible={true} />);
  const element = screen.getByText(/Test Title/i);
  expect(element).toBeInTheDocument();
});

 

 종합 예시

import React from 'react';
import { Button } from 'antd';
import { Container, StyledButton } from './MyComponent.styles';

interface MyComponentProps {
  title: string;
  isVisible: boolean;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, isVisible }) => {
  const handleButtonClick = () => {
    console.log('Button clicked');
  };

  return (
    <Container>
      <h1>{title}</h1>
      {isVisible && <p>This is a visible paragraph.</p>}
      <StyledButton onClick={handleButtonClick}>Click Me</StyledButton>
    </Container>
  );
};

export default MyComponent;