더 깔끔한 React 코드를 작성하는 방법

10개가 넘는 프로덕션 수준의 React 프로젝트로 손을 더럽힌 후 대부분의 프로젝트와 일치하는 한 가지는 불필요한 HTML 요소/태그의 사용이었습니다. 코드를 유지, 작성, 읽기 및 디버그하기가 더 쉽도록 하는 것이 매우 중요합니다. 일반적으로 다음을 따라 코드가 깨끗한 코드 지침을 따르는지 확인할 수 있습니다.



이 태그는 아무 이유 없이 DOM을 오염시키고 있었습니다. 그러나 그들은 React에서 JSX의 단점을 극복하기 위해 이러한 태그를 도입했습니다. 단점은 JSX가 항상 단일 루트 HTML 요소를 반환해야 한다는 것입니다.
즉, 이것은 잘못된 JSX입니다.

// The parenthesis helps to write multi-line HTML
const element = (

  // 1st div block
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>

  // 2st div block
  <div>
    <h1>Sibling element</h1>
    <h2>I will break JSX element</h2>
  </div>
);

이러한 단점 때문에 많은 개발자가 div 태그를 추가하여 엄청난 양의 코드 블록을 래핑합니다. 따라서 JSX의 단점을 해결합니다.

const element = (

  // The wrapper
  <div>

      // 1st div block
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>

      // 2st div block
      <div>
        <h1>Sibling element</h1>
        <h2>I will break JSX element</h2>
      </div>

  </div>
);

이제 이것은 사소한 프로젝트에서 작동합니다. 나도 이 길을 가는 것이 죄다. 거짓말하지 않습니다. 하지만 거대한 React 지향 프로젝트를 시작하면서 DOM 코드가 div 태그로 가득 찬 것을 발견했습니다. 이것은 조만간 "div 수프"로 이어졌습니다.

div 수프 란 무엇입니까?

예를 들어 설명하는 단락을 토하기 위해 키보드를 두드리는 것보다 훨씬 더 명확해질 것입니다!

다음 React 코드를 고려하십시오.

return (
    // This div does nothing but wraps the two children
    <div>
      <h1>This is heading</h1>
      <h2>This is a sub-heading</h2>
    </div>
  )

DOM에서 이 작업의 결과는 다음과 같습니다.



이것은 사소한 예입니다. 실제 React 앱은 훨씬 더 복잡합니다. 구성 요소 간에 깊이 중첩된 상위-하위 관계를 가질 수 있습니다. 예를 들어:

  return (
    <div>
      <h1>This is heading</h1>
      <h2>This is a sub-heading</h2>
      <Child1>
        <Child2>
          <Child3>
            <Child4/>  
          </Child3>
        </Child2>
      </Child1>
    </div>
  )

아이들이 있는 곳:

// Every React JSX element inherently receives the "props" argument
const Child1 = (props) => (
  <div>
    <h3>I am child 1</h3>
    {/* Anything that is passed between <Child1> and </Child1> */}
    {props.children}
  </div>
);

const Child2 =  (props) => (
  <div>
    <h3>I am child 2</h3>
    {props.children}
  </div>
);

const Child3 = (props) => (
  <div>
    <h3>I am child 3</h3>
    {props.children}
  </div>
);

const Child4 = () => (
  <div>
    <h3>I am child 4</h3>
  </div>
);

이것은 DOM을 생성할 것입니다:



생성된 DOM을 주의 깊게 확인하면 코드를 래핑하고 JSX 제한을 극복하는 것 외에는 목적이 없는 수많은 div 태그를 볼 수 있습니다. 결국 이것은 div 수프를 일으킬 것입니다.

이는 디버깅 시간을 기하급수적으로 증가시킬 수 있으므로 더 빠른 전달 및 버그 수정에 영향을 미칠 수 있습니다!

DIV 수프 피하기

독수리 눈을 가진 독자는 문제가 있는 코드 자체에서 해결책을 알아차렸을 것입니다. div 없이 전달된 구성 요소를 반환하는 래퍼 React 구성 요소를 만들기만 하면 됩니다.

// Wrapper component that returns any DOM element passed between <Wrapper> and </Wrapper>
// The props inherently have the children property on it
// All react JSX elements should be Capitalized as a naming convention 

const Wrapper = (props) => {
  return props.children;
}

이전 코드 리팩토링:

// Every React JSX element inherently receives the "props" argument
const Child1 = (props) => (
  <Wrapper>
    <h3>I am child 1</h3>
    {/* Anything that is passed between <Child1> and </Child1> */}
    {props.children}
  </Wrapper>
);

const Child2 =  (props) => (
  <Wrapper>
    <h3>I am child 2</h3>
    {props.children}
  </Wrapper>
);

const Child3 = (props) => (
  <Wrapper>
    <h3>I am child 3</h3>
    {props.children}
  </Wrapper>
);

const Child4 = () => (
  <Wrapper>
    <h3>I am child 4</h3>
  </Wrapper>
);

그리고

return (
    <Wrapper>
      <h1>This is heading</h1>
      <h2>This is a sub-heading</h2>
      <Child1>
        <Child2>
          <Child3>
            <Child4/>  
          </Child3>
        </Child2>
      </Child1>
    </Wrapper>
  )

이것은 불필요한 div 태그를 제거하여 수프를 방지합니다!

반응 조각

모든 React 프로젝트에 이 Wrapper 구성 요소를 도입하는 것은 어렵고 추가 노력이 필요할 것이며 우리 개발자는 정확히 그러한 상황을 피하려고 노력합니다.

React 프래그먼트를 소개합니다.

공식 문서에 따르면:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

• ReactJs.org

다음 두 가지 방법으로 이 작업을 수행할 수 있습니다.

사용 React.Fragment

React.Fragment인 <> 및 </>의 short syntax 사용

다음과 같이 위의 코드를 통해 보여드리겠습니다.

return (
    <React.Fragment>

      <h1>This is heading</h1>
      <h2>This is a sub-heading</h2>
      <Child1>
        <Child2>
          <Child3>
            <Child4/>  
          </Child3>
        </Child2>
      </Child1>

    </React.Fragment>
  )

나 같은 게으른 개발자에게는 속기를 사용하는 것이 훨씬 좋습니다.

 return (
    <>

      <h1>This is heading</h1>
      <h2>This is a sub-heading</h2>
      <Child1>
        <Child2>
          <Child3>
            <Child4/>  
          </Child3>
        </Child2>
      </Child1>

    </>
  )

최종 코드는 다음과 같습니다.

const Child1 = (props) => (
  <>
    <h3>I am child 1</h3>
    {/* Anything that is passed between <Child1> and </Child1> */}
    {props.children}
  </>
);

const Child2 =  (props) => (
  <>
    <h3>I am child 2</h3>
    {props.children}
  </>
);

const Child3 = (props) => (
  <>
    <h3>I am child 3</h3>
    {props.children}
  </>
);

const Child4 = () => (
  <>
    <h3>I am child 4</h3>
  </>
);

이것은 div 수프를 피하면서 동일한 결과를 얻는 데 도움이 됩니다.