구성 요소 기반 개발의 5가지 기교

21271 단어 react frontend javascript

구성 요소 기반의 개발이 전방 개발을 휩쓸었다.
구성 요소는 언어 표준이 아닙니다. 구성 요소를 만들고 사용할 수 있는 방법이 많습니다.
다음은 구성 요소 구동 개발을 돕는 몇 가지 기술입니다.
이는 앵글러, 뷰JS, 리액트 등 현대적 틀에 국한되지 않는다.이러한 기술은 모든 구성 요소 구동의 개발/설정에 도움이 될 것이다.

구도
하나의 구성 요소(a)에 세 개의 하위 구성 요소(A1, A2, A3)가 있다고 상상해 보세요.그것들은 각각 다른 데이터로 렌더링해야 한다.
모든 세 개의 하위 구성 요소에 대해 부모 구성 요소를 통해 데이터를 전달해야 합니다.

const App = () => {
  const dataA = {}, dataB = {}, dataC = {};
  const handleClickA = () => {};
  const handleClickB = () => {};
  const handleClickC = () => {};

  return (
    <ComponentA
      dataA={dataA}
      handleClickA={handleClickA}
      dataB={dataB}
      handleClickB={handleClickB}
      dataC={dataC}
      handleClickC={handleClickC}
    />
  );
}

const ComponentA = ({
  dataA,
  dataB,
  dataC,
  handleClickA,
  handleClickB,
  handleClickC
}) => (
  <>
    <ComponentA1 data={dataA} handleClick={handleClickA} />
    <ComponentA2 data={dataB} handleClick={handleClickB} />
    <ComponentA3 data={dataC} handleClick={handleClickC} />
  </>
);

작문을 통해 당신은 상술한 안배를 다음과 같이 바꿀 수 있습니다.

const App = () => {
  const dataA = {}, dataB = {}, dataC = {};
  const handleClickA = () => {};
  const handleClickB = () => {};
  const handleClickC = () => {};

  return (
    <ComponentA>
      <ComponentA1
        data={dataA}
        handleClick={handleClickA}
      />
      <ComponentA2
        data={dataB}
        handleClick={handleClickB}
      />
      <ComponentA3
        data={dataC}
        handleClick={handleClickC}
      />
    </ComponentA>
  );
}

const ComponentA = ({children}) => (
  <>
    <h1>Hello world</h1>
    {children}
  </>
);

복잡한 논리를 함수로 추출하다
입력을 받아들이고 출력을 제공할 수 있는 복잡한 논리는 함수로 추출되어야 한다.논리를 함수로 추출하면 다음과 같은 이점이 있습니다.

테스트 가능 함수

더 좋은 코드 재사용성

작은 부품 유지

코드 검토 용이

구성 요소의 상호작용만 테스트

일반 컨텐트에 CSS 사용
JavaScript를 사용하면 서스펜딩 동작, 기본 애니메이션 등의 기능을 쉽게 사용할 수 있습니다.하지만 CSS 자체에서 이러한 기능을 실현하는 것을 고려해 보자.
CSS는 JS에 비해 몇 가지 기능을 쉽게 실현할 수 있다.CSS를 사용하는 것이 너에게 유리하다.

const App = () => {
  const [hovered, setHover] = useState(false)
  return (
    <Component
      className="container"
      onMouseEenter={() => setHover(true)}
      onMouseEenter={() => setHover(false)}
    >
      <Contact hovered={hovered} />
    </ComponentA>
  );
}

const Contact = ({hovered}) => {
    if (!hovered) {
    return null
  }

  return (
    <a href="mailto:[email protected]">Contact Us</a>
  );
}

위의 구성 요소를 다음으로 다시 작성할 수 있습니다.

const App = () => {
  const [hovered, setHover] = useState(false);

  return (
    <Component
      className="container"
      onMouseEenter={() => setHover(true)}
      onMouseEenter={() => setHover(false)}
    >
      We provide User Interface Development Services
      <Contact className="contact-link"/>
    </ComponentA>
  );
}

const Contact = () => (
  <a href="mailto:[email protected]">Contact Us</a>
);

SCSS에 정의된 스타일은 다음과 같습니다.

.container {
  display: block;

  .contact-link {
    display: none;
  }

  &:hover .contact-link {
    display: block; /* or any other visible display */
  }
}

이렇게 하면 어셈블리를 다시 렌더링할 필요가 없습니다.

관심사 분리
코드 블록은 그들이 하려고 하는 일만 해야 한다.
더 많은 조건과 파라미터를 추가하면 그것들이 지루해지고 디버깅과 테스트가 어렵다.
위의 코드 블록을 예로 들면 ContactUs 구성 요소,

const Contact = ({hovered}) => {
  if (!hovered) {
    return null
  }

  return (
    <a href="mailto:[email protected]">Contact Us</a>
  );
}

여기서 렌더링은 멈추는 아이템 값에 의존합니다.이것은 이 부품이 hovered 도구의 각종 상황에 대한 테스트를 해야 한다는 것을 의미한다.
이 경우 부울 속성이지만 복잡한 객체 속성의 경우 곱합니다.
우리는 정지 도구에 대한 의존을 제거하기 위해 구성 요소를 다시 쓸 수 있습니다.
컨테이너 어셈블리 자체에 렌더링/렌더링되지 않는 문제가 있어야 합니다.Contact 구성 요소는 연락처 버튼/링크를 표시하는 작업을 수행합니다.논리에 맞는 일을 더 많이 하고 변두리 사례를 더 많이 끌어들일 것으로 기대한다.
우리는 CSS를 사용하여 정지 단추를 숨기고 표시할 수 있습니다.마치 우리가 지난 절에서 본 바와 같다.
또는 다음과 같이 모 피쳐 어셈블리에서 조건부 Contact 컴포넌트를 나타냅니다.

const App = () => {
  const [hovered, setHover] = useState(false);

  return (
    <Component
      onMouseEenter={() => setHover(true)}
      onMouseEenter={() => setHover(false)}
    >
      We provide User Interface Development Services
      {hovered && <Contact />}
    </ComponentA>
  );
}

const Contact = () => (
  <a href="mailto:[email protected]">Contact Us</a>
);

사용 가능한 도구 사용
디자인 시스템, 이야기책, 단원 테스트, 커버율 보고서 등. 더 많은 도구를 계속 열거할 수 있습니다."핵심 툴을 파악하고 최대한 활용하는 것이 중요합니다."
예를 들어,

이야기책
Storybook은 기본적인 예와 조합을 구축하는 데 가장 좋은 도구입니다.구성 요소의 문서를 구축하는 데도 도움이 됩니다.

테스트
유닛, 통합, E2E 등을 통해 인코딩과 발표를 자신있게 수행할 수 있습니다.당신의 테스트를 다른 전략에 분산시키고 이성을 유지하세요.
테스트 용례는 제한과 테두리 용례에 대한 멋진 문서를 제공합니다.테스트로 코드를 덮어쓰고 유지보수합니다.

You can use Coverage Reports to get Overview on how much Testing has increased and add Coverage Report labels to PRs on Github

벨벳
Linter는 멋진 코드를 작성하고 문법/코드 스타일의 문제를 해결하는 데 도움을 줄 것입니다.만약 개발 과정에서 조심하지 않으면, 이런 문제들은 통상적으로 코드 심사에 나타난다.
간격, 코드 스타일, 함수 서명 등 스타일 규칙은 흔히 볼 수 있는 검토 주석이다.처음부터 그것들을 피하면 코드 심사를 효율적으로 하는 데 도움이 될 것이다.

Bonus 😎

사람의 코드🤝
응용 프로그램 코드는 매우 간단하다.사람들을 위해 코드를 작성하는 것은 매우 어렵다.
코드는 매우 최적화될 수 있을 뿐만 아니라 읽기도 매우 어렵다.읽기 어려운 코드는 오해 코드와 관련된 많은 흔한 오류를 쉽게 일으킬 수 있다.
코드 줄의 작고 읽기 쉬운 상태를 유지하면 더욱 좋은 코드 조화를 가져올 수 있다.
나는 코드 구조에 있어서 더욱 엄격한 단체가 있다는 관점에 부딪혔다.이 논점은 매우 효과가 있지만 코드도 신입사원을 위해 고급 개발자든 초보 개발자든 준비를 해야 한다.
단체 규율은 일반적인 지역사회 규율과 다를 수 있다.이것이 바로 단체 규율과 지역사회 규율이 마찰을 최대한 줄여야 하는 이유다.
예를 들어 광범위하게 사용되는 코드 스타일을 따르려고 시도합니다.

https://github.com/airbnb/javascript

https://github.com/rwaldron/idiomatic.js/

https://google.github.io/styleguide/jsguide.html

elsewhencode/project-guidelines: A set of best practices for JavaScript projects

standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer

https://freefrontend.com/javascript-style-guides/

등

결론
이상의 힌트가 있으면 우리는 더욱 좋은 전단 코드를 얻을 수 있다.