[클린코드 리액트] 컴포넌트 내부에 컴포넌트 선언 지양하기

컴포넌트 내부에 다른 컴포넌트를 선언하는 것은 일반적으로 코드의 결합도를 증가시키는 결과를 가져옵니다. 이는 몇 가지 부작용을 초래할 수 있습니다.

 

결합도 증가

• 구조적, 스코프적 종속성: 내부 컴포넌트는 외부 컴포넌트에 종속되어 구조적으로 강하게 결합됩니다. 이는 코드의 유지보수 및 확장성을 저해할 수 있습니다.
• 확장성 저하: 나중에 내부 컴포넌트가 분리되거나 재사용해야 할 경우, 이를 위한 변경이 어려울 수 있습니다. 즉, 기능의 추가 또는 수정이 더 어려워집니다.

성능 저하

• 리랜더링 문제: 상위 컴포넌트가 리랜더링될 때, 내부에 있는 하위 컴포넌트도 함께 재생성됩니다. 이는 성능 저하로 이어질 수 있습니다. 특히, 내부 컴포넌트가 많고 복잡한 경우에는 이 문제가 더 심각해질 수 있습니다.

예시

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

  const InnerComponent = (props) => {
    const { onClickIncrement } = props;
    const text = `${count} inner-component`;
    return (
      <div>
        <button onClick={onClickIncrement}>+</button>
        {text}
      </div>
    );
  };

  const incrementCount = () => {
    setCount((prev) => prev++);
  };

  return (
    <div>
      <h1>Outer Component</h1>
      <InnerComponent onClickIncrement={incrementCount} />
    </div>
  );
}

 

위 App 컴포넌트의 내부에는 InnerComponent 라는 내부 컴포넌트가 선언되어 있고 해당 컴포넌트를 랜더링 시키고 있습니다. InnerComponent는 count 라는 state 를 스코프를 활용해 참조하고 있고 props로 이벤트 핸들러 함수를 내려받아 사용하고 있습니다.

 

단순한 예시로써 그다지 복잡해 보이지 않지만 실제 프로덕트 레벨에서 이런식으로 컴포넌트를 설계해 사용한다면 추후에 컴포넌트가 비대해져 리팩토링을 시도할 때 굉장히 복잡도가 높은 코드를 확인할 수 있습니다.

 

가급적이면 내부에서 컴포넌트를 만들어 사용하는 것을 지양하고 독립된 컴포넌트로 설계해 코드의 복잡도를 줄이는 것이 협업하기 좋은 클린코드라고 생각합니다.

 

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

  const incrementCount = () => {
    setCount((prev) => prev++);
  };

  return (
    <div>
      <h1>Outer Component</h1>
      <ButtonComponent
        text={`${count} inner-component`}
        onClickIncrement={incrementCount}
      />
      <InnerComponent onClickIncrement={incrementCount} />
    </div>
  );
}

function ButtonComponent(props) {
  const { text, onClickIncrement } = props;
  return (
    <div>
      <button onClick={onClickIncrement}>+</button>
      {text}
    </div>
  );
}

 

 

위 코드를 리팩토링해 독립된 컴포넌트로 분리했습니다. 훨씬 깔끔하고 가독성 좋은 App 컴포넌트를 확인할 수 있습니다.