반응 모범 사례

이 기사에서 나는 우리를 더 나은 React 개발자로 만들 수 있는 몇 가지 세부 사항을 공유하고 싶습니다.




JSX와 논리 분리

항상 JSX에서 로직(또는 기능적 부분)을 퍼뜨리는 것이 좋습니다. 코드가 더 깨끗하고 편집 가능합니다. 요소 내부에 직접 배치하는 대신 onClick 이벤트를 처리하는 방법 아래 예제를 확인하십시오.

import React from 'react';

function Todo() {
  let condition = true;

  const addHandler = () => {
    if (condition) {
      //do api call
    }
  }

  return (
    <div>
      <button
        onClick={() => addHandler()}
      >Add</button>
    </div>
  )
}

export default Todo;

작은 구성 요소로 분할 및 재사용 가능

이 파트에서는 ​​실제 프로젝트에서 UI 구성 요소를 분할해 보겠습니다.

NavBar: HamBtn을 포함하는 상단 탐색 모음 컨테이너

HamBtn: 다른 부분에서 사용할 수 있는 3개의 가로선 버튼

TodoRow: 텍스트 및 기타 작업 버튼이 포함된 Todo 행

RadioBtn: 토글 버튼

DeleteBtn: 할 일 삭제 버튼

버튼: 여러 동적 소품이 있는 일반 버튼 구성요소

컨테이너: Todo 목록에 대한 전체 컨테이너입니다.

이것들은 모두 별도의 구성 요소가 될 것이므로 장기적으로 프로젝트가 더 커지면 거의 모든 구성 요소를 재사용할 수 있습니다.


상태 관리(Redux 또는 컨텍스트)

Redux 라이브러리를 사용하는 경우 비동기 API 호출에 도움이 되는 Saga 사용을 적극 권장합니다.
Redux: 빈도가 높은 상태 업데이트가 있는 대규모 애플리케이션에 적합

Context Api의 경우 Redux보다 훨씬 간단하며 라이브러리를 다운로드할 필요가 없습니다.
컨텍스트 API: 리소스가 풍부하고 상태 변경이 최소화되는 소규모 애플리케이션에 이상적입니다

.


후크 및 기능 구성 요소

"이것"은 더 이상 없습니다

코드 줄 수 감소

디버그, 테스트 및 리팩토링이 더 쉽습니다.

대부분의 개발자들이 이미 이 두 가지를 기반으로 모든 프로젝트를 사용하고 있다고 생각하지만, 그냥 언급하고 싶었습니다 😁


스타일 구성 요소

Styled-Components는 최신 JavaScript에서 CSS를 사용하는 새로운 방법 중 하나입니다

.

단일 구성 요소로 범위가 지정되고 페이지의 다른 요소로 누출되지 않는 CSS를 작성하는 방법인 CSS 모듈의 후속 제품입니다.

import React from 'react';
import { Text } from './SubTitle.styled';

function SubTitle() {
  return (
    <Text>Hello</Text>
  )
}
export default SubTitle;

import styled from "styled-components";

export const Text = styled.span`
  color: #AAA;
  font-size: 20px;
`;

테스트

단위 테스트 - (보다 중요한 기능에 대해 응용 프로그램의 단일 구성 요소를 확인하기 위해)

통합 테스트 - (모듈의 다른 부분이 함께 작동하는지 확인하기 위해)

종단 간 테스트 - (응용 프로그램의 워크플로를 처음부터 끝까지 테스트하는 것을 포함하며 실제 사용자 시나리오를 복제하는 것을 목표로 함)

타이프스크립트

TypeScript는 "일반 JavaScript로 컴파일되는 JavaScript의 유형이 지정된 상위 집합"입니다.

React에서 Typescript를 사용하면 강력한 형식과 통합 속도가 더 빠른 보다 안정적인 구성 요소를 개발하는 데 도움이 됩니다. 가장 간단한 예를 확인해 보겠습니다.

interface Props {
  label: string;
  onClick: () => void;
}

function Button({ label, onClick, ...props }: Props) {
  return (
    <button
      onClick={onClick}
      {...props}
    >
      {label}
    </button>
  )
}

export default Button;

본질적인 요소:
고유 요소는 특수 인터페이스 JSX.IntrinsicElements에서 조회됩니다. 기본적으로 이 인터페이스가 지정되지 않으면 모든 것이 진행되고 내장 요소는 유형 검사되지 않습니다. 그러나 이 인터페이스가 있는 경우 내장 요소의 이름은 JSX.IntrinsicElements 인터페이스의 속성으로 조회됩니다.

내장 요소를 사용하면 요소의 기본 '소품'을 사용할 수 있습니다.

export type Props = JSX.IntrinsicElements["button"] & {
  label: string;
}

<Button
  label={'SUBMIT'}
  onClick={() => console.log('CLICK')}
  onBlur={() => console.log('BLUR')}
/>

React는 멋진 라이브러리입니다. 매우 유연하고 확장 가능한 방식으로 코드를 분할 및 구성할 수 있으며 단순하고 높은 수준으로 유지하고 싶었습니다.

도움이 되셨길 바라며 끝입니다 😊