반드시 알아야 할 깔끔한 React TypeScript 코드를 위한 7가지 팁 🧹✨

39852 단어 typescript javascript react webdev

깨끗한 코드는 그냥 작동하는 코드가 아닙니다. 읽기 쉽고, 이해하기 쉽고, 유지보수가 쉬운 깔끔하게 정리된 코드를 말합니다.

React의 깨끗한 코드에 대한 몇 가지 모범 사례를 살펴보겠습니다. 이를 통해 코드를 달까지 쉽게 유지할 수 있습니다! 🚀🌕

1. 모든 값에 명시적 유형 제공

TypeScript를 사용하는 동안 많은 사람들이 값에 대한 명시적 유형을 제공하는 것을 종종 건너뛰어 TypeScript가 제공하는 진정한 이점을 놓치고 있습니다. 종종 이들은 코드 기반에서 볼 수 있습니다.

잘못된 예 01:

const Component = ({ children }: any) => {
  // ...
};

나쁜 예 02:

const Component = ({ children }: object) => {
  // ...
};

대신 적절하게 정의된interface을 사용하면 편집자가 정확한 제안을 제공하므로 작업이 훨씬 쉬워집니다.

좋은 예:

import { ReactNode } from "react";

interface ComponentProps {
  children: ReactNode;
}

const Component = ({ children }: ComponentProps) => {
  // ...
};

2. 상태를 업데이트하는 동안 이전 상태를 고려합니다.

새 상태가 이전 상태에 의존하는 경우 상태를 이전 상태의 함수로 설정하는 것이 항상 권장됩니다. React 상태 업데이트는 일괄 처리할 수 있으며 이러한 방식으로 업데이트를 작성하지 않으면 예기치 않은 결과가 발생할 수 있습니다.

나쁜 예:

import React, { useState } from "react";

export const App = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const toggleButton = () => {
    setIsDisabled(!isDisabled);
  };

  // here toggling twice will yeild the same result
  // as toggling once
  const toggleButtonTwice = () => {
    toggleButton();
    toggleButton();
  };

  return (
    <div>
      <button disabled={isDisabled}>
        I'm {isDisabled ? "disabled" : "enabled"}
      </button>
      <button onClick={toggleButton}>
        Toggle button state
      </button>
      <button onClick={toggleButtonTwice}>
        Toggle button state 2 times
      </button>
    </div>
  );
};

좋은 예:

import React, { useState } from "react";

export const App = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const toggleButton = () => {
    setIsDisabled((isDisabled) => !isDisabled);
  };

  const toggleButtonTwice = () => {
    toggleButton();
    toggleButton();
  };

  return (
    <div>
      <button disabled={isDisabled}>
        I'm {isDisabled ? "disabled" : "enabled"}
      </button>
      <button onClick={toggleButton}>
        Toggle button state
      </button>
      <button onClick={toggleButtonTwice}>
        Toggle button state 2 times
      </button>
    </div>
  );
};

3. 파일을 간결하고 깔끔하게 유지

파일을 원자적이고 간결하게 유지하면 공원에서 파일을 디버깅, 유지 관리 및 찾기까지 할 수 있습니다!

나쁜 예:

// src/App.tsx
export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to write clean react code",
    },
    {
      id: 2,
      title: "Eat, sleep, code, repeat",
    },
  ];

  return (
    <main>
      <nav>
        <h1>App</h1>
      </nav>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

좋은 예:

// src/App.tsx
export default function App() {
  return (
    <main>
      <Navigation title="App" />
      <Posts />
    </main>
  );
}

// src/components/Navigation.tsx
interface NavigationProps {
  title: string;
}

export default function Navigation({ title }: NavigationProps) {
  return (
    <nav>
      <h1>{title}</h1>
    </nav>
  );
}

// src/components/Posts.tsx
export default function Posts() {
  const posts = [
    {
      id: 1,
      title: "How to write clean react code",
    },
    {
      id: 2,
      title: "Eat, sleep, code, repeat",
    },
  ];

  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} title={post.title} />
      ))}
    </ul>
  );
}

// src/components/Post.tsx
interface PostProps {
  title: string;
}

export default function Post({ title }: PostProps) {
  return <li>{title}</li>;
}

4. 여러 상태의 값에 열거형 또는 상수 개체 사용

여러 상태를 취할 수 있는 변수를 관리하는 프로세스는 Enums 또는 Constant Objects 를 사용하여 훨씬 쉽게 할 수 있습니다.

나쁜 예:

import React, { useState } from "react";

export const App = () => {
  const [status, setStatus] = useState("Pending");

  return (
    <div>
      <p>{status}</p>
      <button onClick={() => setStatus("Pending")}>
        Pending
      </button>
      <button onClick={() => setStatus("Success")}>
        Success
      </button>
      <button onClick={() => setStatus("Error")}>
        Error
      </button>
    </div>
  );
};

좋은 예:

import React, { useState } from "react";

enum Status {
  Pending = "Pending",
  Success = "Success",
  Error = "Error",
}
// OR
// const Status = {
//   Pending: "Pending",
//   Success: "Success",
//   Error: "Error",
// } as const;

export const App = () => {
  const [status, setStatus] = useState(Status.Pending);

  return (
    <div>
      <p>{status}</p>
      <button onClick={() => setStatus(Status.Pending)}>
        Pending
      </button>
      <button onClick={() => setStatus(Status.Success)}>
        Success
      </button>
      <button onClick={() => setStatus(Status.Error)}>
        Error
      </button>
    </div>
  );
};

5. TS-free TSX를 최대한 사용

TSX는 어떻게 TS-free가 될 수 있습니까? 🤔

안심하십시오. 우리는 전체 구성 요소가 아닌 마크업 부분에 대해서만 이야기하고 있습니다. 기능이 없는 상태로 유지하면 구성 요소를 더 쉽게 이해할 수 있습니다.

나쁜 예:

const App = () => {
  return (
    <div>
      <button
        onClick={() => {
          // ...
        }}
      >
        Toggle Dark Mode
      </button>
    </div>
  );
};

좋은 예:

const App = () => {
  const handleDarkModeToggle = () => {
    // ...
  };

  return (
    <div>
      <button onClick={handleDarkModeToggle}>
        Toggle Dark Mode
      </button>
    </div>
  );
};

참고: 논리가 한 줄이면 TSX에서 사용하는 것이 상당히 허용됩니다.

6. 우아한 조건부 렌더링 요소

조건부 렌더링 요소는 React에서 가장 일반적인 작업 중 하나이므로 깨끗한 조건을 사용하는 것이 필요합니다.

나쁜 예:

const App = () => {
  const [isTextShown, setIsTextShown] = useState(false);

  const handleToggleText = () => {
    setIsTextShown((isTextShown) => !isTextShown);
  };

  return (
    <div>
      {isTextShown ? <p>Now You See Me</p> : null}

      {isTextShown && <p>`isTextShown` is true</p>}
      {!isTextShown && <p>`isTextShown` is false</p>}

      <button onClick={handleToggleText}>Toggle</button>
    </div>
  );
};

좋은 예:

const App = () => {
  const [isTextShown, setIsTextShown] = useState(false);

  const handleToggleText = () => {
    setIsTextShown((isTextShown) => !isTextShown);
  };

  return (
    <div>
      {isTextShown && <p>Now You See Me</p>}

      {isTextShown ? (
        <p>`isTextShown` is true</p>
      ) : (
        <p>`isTextShown` is false</p>
      )}

      <button onClick={handleToggleText}>Toggle</button>
    </div>
  );
};

7. JSX 속기 사용

부울 소품

truthyProp 와 같은 값 없이 prop 이름만 있는 구성 요소에 truthy prop을 제공할 수 있습니다. truthyProp={true}와 같이 쓰는 것은 불필요합니다.

나쁜 예:

interface TextFieldProps {
  fullWidth: boolean;
}

const TextField = ({ fullWidth }: TextFieldProps) => {
  // ...
};

const App = () => {
  return <TextField fullWidth={true} />;
};

좋은 예:

interface TextFieldProps {
  fullWidth: boolean;
}

const TextField = ({ fullWidth }: TextFieldProps) => {
  // ...
};

const App = () => {
  return <TextField fullWidth />;
};

문자열 소품

String Prop 값은 중괄호나 백틱을 사용하지 않고 큰따옴표로 묶을 수 있습니다.

나쁜 예:

interface AvatarProps {
  username: string;
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar username={"John Wick"} />;
};

좋은 예:

interface AvatarProps {
  username: string;
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar username="John Wick" />;
};

정의되지 않은 소품

기본 TypeScript/JavaScript와 마찬가지로 prop에 값이 제공되지 않으면 undefined 가 됩니다.

나쁜 예:

interface AvatarProps {
  username?: string;
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar username={undefined} />;
};

좋은 예:

interface AvatarProps {
  username?: string;
  // OR `username: string | undefined`
}

const Avatar = ({ username }: AvatarProps) => {
  // ...
};

const Profile = () => {
  return <Avatar />;
};

이제 여러분도 깨끗한 TSX를 작성하는 방법을 알게 되었습니다!

연구에 따르면 펜과 종이에 목표를 적으면 목표를 달성할 가능성이 21%에서 39% 더 높아집니다. 꿈을 이루기 위한 여정을 더 쉽게 만들어 줄 다음 공책과 저널을 확인하십시오: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

읽어 주셔서 감사합니다

개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서가 필요하십니까? Upwork에 저에게 연락하십시오

내가 무엇을 하고 있는지 보고 싶습니까? 내 Personal Website 및 GitHub을 확인하십시오.

연결하시겠습니까? 에 나에게 연락

나를 따라 최근에 내가 무엇을 확인하십시오.

Weekly new Tidbits를 보려면 내 블로그를 팔로우하세요.

자주하는 질문

다음은 제가 받는 몇 가지 자주 묻는 질문입니다. 따라서 이 FAQ 섹션이 문제를 해결하기를 바랍니다.

저는 초보자입니다. Front-End Web Dev를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.

저를 멘토링해 주시겠습니까?
죄송합니다. 저는 이미 많은 업무를 처리하고 있으며 누군가를 멘토링할 시간이 없습니다.

Reference

이 문제에 관하여(반드시 알아야 할 깔끔한 React TypeScript 코드를 위한 7가지 팁 🧹✨), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Mac용 Visual Studio를 설치해 보았습니다.

Node.js 및 MongoDB로 OpenID 서버 생성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다