그래프 계층이 코드에 대해 알려주는 것 + React FSD

서론 

함수형 코딩의 계층형 설계 패턴을 읽고 그래프의 중요성을 느끼게 되었다. 함수를 만들 때 사실 잘 호출 그래프를 그리지는 않는데, 주니어 개발자거나 아직 취준생이라면 전체적인 그래프를 그려보면 흐름을 알 수 있어서 많은 도움이 될거라 생각한다. 

 

본론

우리는 함수를 만들 때 "좋은 함수를 만들기 위해선 작게만들고, 하나만 담당하도록 만들어야 한다 " 다음과 같은 말을 듣곤 했다. 왜 그럴까라는 의문을 가져봤다.

1. 재사용성이 높다.
2. 유지보수성이 높다.
3. 테스트하기 좋다.
4. 코드를 잘 읽을 수 있다.

위와 같은 이유를 들 수 있다.

 

밑의 예는 함수를 간단하게 다이어그램으로 만든 것이다.

 

위로 연결된 것이 적은 함수가 바꾸기가 좋다. 왜냐하면 맨 위의 freeTie, freeTieClip 함수는 위에 연결된 함수가 없기 때문이다.

하지만 밑의 indexOfItem, addElementLast 함수는 연결된 것이 많아 코드 수정이 쉽지 않다. 그래서 그래프에서 밑에 있는 함수는 사용하는 곳이 많아서 코드 수정이 쉽지 않다.

 

그래프가 코드에 대해 알려주는 것

1. 위로 연결된 것이 적은 함수가 바꾸기가 쉽다. 자주 바뀌는 코드는 가능한 위에 있어야함.
2. 위쪽으로 많이 연결된 함수를 테스트하는 것이 가치가 있다. 아래쪽에 있는 함수를 테스트하는 것이 위쪽에 있는 함수를 테스트하는 것보다 가치가 있음.
3. 아래쪽에 함수가 적을수록 재사용하기 좋다. 낮은 수준의 단계로 함수를 빼내면 재사용성이 높아짐.

 

그러면 React에서는 어떨까?

밑의 컴포넌트는 FSD 패턴을 가지고 만들었다. FSD 계층에 따르면 맨 위는 App, Page, Widget, Feature, Entity, Shared (App은 위에 사진에서 생략)와 같은 순서를 가지고 있다.

밑으로 갈수록 사용하는 컴포넌트가 사용이 많아지고, 위로 갈수록 컴포넌트 사용 횟수가 적어진다. React를 사용해 봤으면 알겠지만, Page 컴포넌트는 가장 큰 계층으로 한 번밖에 사용이 안된다. 그러기에 재사용성이 적다. 반면에 Shared 컴포넌트는 작은 컴포넌트를 조합하여 큰 컴포넌트를 만들기에 사용성이 많다. 그러기에 Shared 컴포넌트는 순수함수처럼 만들어져야 한다. 

순수함수란? 액션이 없고, 외부로부터 방해가 없어야 한다. 즉 계산으로만 이루어진 것을 순수함수라고 한다. 

 

리액트에서의 순수함수란?

외부로직은 없고 오직 순수 데이터와 UI만 있는 것을 말한다.

밑은 순수 UI만 있는 Card 컴포넌트이다.

interface Card {
  id: string;
  name: string;
  price: number;
  image: string;
}

interface Props {
  handleClick: () => void;
  item: Card;
}

function Card( {handleClick, item} : Props) {
  return (
    <div onClick={onClick}>
      <img src={item.image} />
      <h3>{item.name}</h3>
      <span>{item.price}원</span>
    </div>
  );
}

 

Card 컴포넌트에 외부 로직을 담을 때는 어떻게 사용해야할까?

Presenter, Container 패턴을 사용하자!

Presenter 컴포넌트는 오직 UI만 담당을 하고, Container 컴포넌트는 다른 외부 로직만을 담은 패턴을 말한다.

 

예시

function MyCard({ Props }) {
  const [item, setItem] = useState(initState);
  const handleClick = () => { 생략.... };
  

  return <Card onClick={handleClick} item={item} />;
}

다시 설명하면, Presenter 컴포넌트는 재사용이 가능한 컴포넌트를 말하고, Container 컴포넌트는 한 번만 사용 가능한 컴포넌트이다.

 

Presenter 컴포넌트는 오직 순수함수만 담긴 컴포넌트, 즉 계산만 있는 컴포넌트를 말한다. 여기선 Card 컴포넌트가 해당이 된다.
Container 컴포넌트는 액션이 들어간 컴포넌트인데, 여기선 MyCard 컴포넌트를 말한다.  handle이 들어가기에 해당 컴포넌트는 액션이 되어버린다.

 

결론

결론적으로 함수든 컴포넌트든 그래프에서 아래로 갈수록 재사용성이 높아지고, 위로 갈수록 재사용성이 낮아진다. 그리고 위로 연결된 것이 적을수록 컴포넌트를 바꾸기가 쉽다. 아래로 갈수록 결합된 게 많으면 결합도가 많아지기에 테스트를 더 많이 해야 한다.

 

개인적인 생각..

React의 FSD 패턴과 접목시켜서 연결 지어봤는데 솔직히 맞는지 모르겠다. 틀리면 댓글부탁드려요..