재귀 컴포넌트와 BFS로 약관 동의 기능을 구현해보자

업무를 보던 중, depth 제한이 없는 재귀 리스트를 구현해야 할 일이 생겼습니다.

이 글에서는...

• 프론트엔드 요구사항을 재귀 컴포넌트와 BFS를 사용하여 해결합니다.
• React.js를 기반으로 설명합니다.

요구사항

사용자의 약관 동의 여부를 관리해야 했었습니다.
그런데 약관은 여러 개가 있을 수 있어 리스트로 관리하는 동시에,
각 리스트이 아이템 하위에 또 다른 약관 리스트가 있을 수 있었습니다.

데이터 구조	UI 구조

해당 요구사항을 전달 받은 후, 최대한 효율적으로 컴포넌트를 관리하기 위해
개발 이전에 목표를 잡고 시작했습니다.

목표

1. depth가 얼마나 깊더라도 코드 수정 없이 작동하도록 만들자.
2. 한 번의 클릭마다 렌더링은 단 한 번만 허용하자.

구현하기

재귀 컴포넌트

렌더링을 한 번만 허용하기에, 데이터는 단 하나의 객체로 관리되어야합니다.

const initialAgreementState = {
  id: 1,
  title: "약관 동의서",
  isAgree: false,
  list: [
    {
      id: 1,
      title: "제 1장 약관 동의",
      isAgree: false,
      list: [
        {
          id: 1,
          title: "사용자 개인정보 ...",
          isAgree: false,
          list: [
            { id: 1, title: "민감 정보 동의", isAgree: false },
            { id: 2, title: "식별 정보 동의", isAgree: false },
            { id: 3, title: "일반 정보 동의", isAgree: false },
          ],
        },
        { id: 2, title: "서비스 이용정보 ...", isAgree: false },
        { id: 3, title: "정보 관리 주체 ...", isAgree: false },
      ],
    },
    {
      id: 2,
      title: "제 2장 약관 동의",
      isAgree: false,
      list: [
        { id: 1, title: "...", isAgree: false },
        { id: 2, title: "...", isAgree: false },
      ],
    },
  ],
};

그렇다면 위와 같은 객체가 구성됩니다.
해당 객체를 어떻게 컴포넌트로 보여줄 수 있을까요?

먼저 해당 객체를 useState에 주입한 후 시작해보겠습니다.

const [agreement, setAgreement] = useState(initialAgreementState);

그 다음, RecursiveContainer 컴포넌트를 만들어 렌더링시켜줍니다.

<Agreement.Container>
  <Agreement.Heading>{agreement.title}</Agreement.Heading>
  <AgreementRecursiveContainer
    agreement={agreement}
  />
</Agreement.Container>

내부 구현체는 다음과 같이 구현합니다.

const AgreementRecursiveContainer = ({
  agreement,
}) => {
  return (
    <>
        <Agreement.List>
          {agreement.list.map((agreementDetail) => (
            <Agreement.Item
              key={agreementDetail.id}
            >
              <Agreement.Heading>{agreementDetail.title}</Agreement.Heading>
              {agreementDetail.list && (
                <AgreementRecursiveContainer
                  agreement={agreementDetail}
                />
              )}
            </Agreement.Item>
          ))}
        </Agreement.List>
    </>
  );
};

해당 컴포넌트를 사용하면 최상위 depth부터 시작하여 map을 통해 리스트를 순회하고,
각 아이템마다 약관 이름을 렌더링한 후, 그 아이템의 하위 약관이 있는지를 체크합니다.

의사 코드를 통해 컴포넌트가 아닌 재귀 함수 느낌으로 표현해보자면 다음과 같습니다.

const recursive = (agreement) => {
	for (let i = 0; i <= agreement.length; i++) {
    	렌더링(agreement[i]);
      	if(isHave(agrement[i].list)) recursive(agreement[i]);
    }
}

의사 코드라기엔 JS에 가까운데요, 정상적으로 작동하는 코드는 아니기에 의사 코드라고 정정해두겠습니다.

탈출 조건은 약관 아래 하위 약관이 존재하는가?가 되고, 재귀 함수 내 로직은

func(약관) -> 약관 아래 하위 약관 리스트 순회(i) -> func(i)

다음과 같이 작동합니다.
이렇게 되면 더 이상 하위 리스트가 존재하지 않는 최하위 아이템까지 렌더링이 되며,
agreementDetail.list && 이라는 조건부 렌더링에 의해 재귀 컴포넌트도 자연스럽게 탈출이 가능해집니다.

잘 표현이 되네요!

하나의 객체에서 어떤 약관을 클릭했는지 탐색하기

단 하나의 객체로 동의 여부를 관리하려면, 문제는 어떤 약관을 클릭했는지를 찾아야한다는 것입니다.
객체 구조를 다시 한번 살펴볼까요?

const initialAgreementState = {
  id: 1,
  title: "약관 동의서",
  isAgree: false,
  list: [
    {
      id: 1,
      title: "제 1장 약관 동의",
      isAgree: false,
      list: [
        {
          id: 1,
          title: "사용자 개인정보 ...",
          isAgree: false,
          list: [
            { id: 1, title: "민감 정보 동의", isAgree: false },
            { id: 2, title: "식별 정보 동의", isAgree: false },
            { id: 3, title: "일반 정보 동의", isAgree: false },
          ],
        },
        { id: 2, title: "서비스 이용정보 ...", isAgree: false },
        { id: 3, title: "정보 관리 주체 ...", isAgree: false },
      ],
    },
    {
      id: 2,
      title: "제 2장 약관 동의",
      isAgree: false,
      list: [
        { id: 1, title: "...", isAgree: false },
        { id: 2, title: "...", isAgree: false },
      ],
    },
  ],
};

다음 사진처럼 제가 '민감 정보 동의'를 클릭했을 때, 어떻게 하나의 객체에서 해당 클릭을 감지할 수 있을까요?

저는 컴포넌트마다 identifierList props를 주입하여 문제를 해결했습니다.

<AgreementRecursiveContainer
  agreement={agreement}
  identifierList={[]}
/>

최상위 RecursiveContainer에 identifierList라는 빈 배열을 전달합니다.

<AgreementRecursiveContainer
  agreement={agreementDetail}
  identifierList={[...identifierList, agreementDetail.id]}
/>

그 다음, RecursiveContainer에서 재귀적으로 자기 자신을 렌더링하는 부분에 다음과 같이 ID를 추가하는 거죠!

이런 식으로 컴포넌트를 렌더링할 경우 각 컴포넌트가 가지는 identifierList는 다음과 같습니다.

이렇게 되면 어디에서 클릭하든, identifierList를 index 끝까지 순회하여 탐색할 수 있게 되는거죠.
[1, 1, 2]에 있는 약관 동의서를 클릭했다면,

최상위 약관 리스트의 1번째 -> 1번째 약관 하위 리스트의 1번째 -> 1번째 약관 하위 리스트의 2번째

와 같이 찾을 수 있습니다!

클릭했을 경우 identifierList를 사용해 트리 탐색을 진행하는 함수를 작성해보겠습니다.

const pickAgree = (
  agreement: AgreementInterface,
  identifierList: Array<number>,
  idx: number
) => {
  return {
    ...agreement,
    list: agreement.list.map((item: AgreementInterface) => {
      if (item.id !== identifierList[idx]) return item;
      if (identifierList[idx + 1])
        return pickAgree(item, identifierList, idx + 1);
      return { ...item, isAgree: !item.isAgree };
    }),
  };
};

로직은 다음과 같습니다.
1. item.id가 identifierList[idx]가 아니라면 우리가 pick한 약관이 아닙니다. 그렇기에 원본 데이터를 그대로 반환합니다.
2. identifierList[idx + 1]이 존재하는 경우, 현재 depth 보다 더 하위의 depth에 존재하는 약관을 클릭했음을 의미합니다. 재귀 함수를 사용하여 하위 depth로 탐색을 시작합니다.
3. 두 조건이 모두 아닐 경우, 사용자가 클릭한 약관이기에 isAgree를 토글합니다.

이렇게 identifierList를 사용하여 어떤 약관을 pick했는지를 탐색할 수 있겠네요!
데이터를 변경한 후 setState를 통해 한 번만 업데이트시켜주면 끝입니다!

const handleToggleAgreementClick = (identifierList) => {
  setAgreement(pickAgree(agreement, identifierList, 0)); 
}

해당 함수를 재귀 컴포넌트의 onClick에 전달시켜, 각 컴포넌트별로 다른 identifierList를 인자로 전달하면 완성입니다!

클릭한 약관 하위의 모든 약관을 제어하기

보통 상위 약관의 동의 여부는 하위 약관 전체를 동의하느냐에 따라 제어됩니다.
약관을 클릭했을 때 하위 약관도 연쇄적으로 동의 여부를 제어하는 로직을,
BFS와 유사한 방법을 통해 구현해보겠습니다.

const withChild = (item, agreeStatus) => {
  if (item.list)
    return {
      ...item, 
      isAgree: agreeStatus,
      list: item.list.map((child) => withChild(child, agreeStatus)),
    };
  return {...item, isAgree: agreeStatus}
};

훨씬 쉽네요! 하위로 전파할 동의/미동의를 agreeStatus로 두고, 재귀 함수와 map을 사용하여
존재하는 최하위의 약관까지 agreeStatus를 반영시키면 됩니다.

위 컴포넌트에서 pick한 객체의 상태를 반환하는 로직에, 해당 함수를 덮어씌워주면 끝입니다!

const pickAgree = (
  agreement: AgreementInterface,
  identifierList: Array<number>,
  idx: number
) => {
  return {
    ...agreement,
    list: agreement.list.map((item: AgreementInterface) => {
      if (item.id !== identifierList[idx]) return item;
      if (identifierList[idx + 1])
        return pickAgree(item, identifierList, idx + 1);
      // return { ...item, isAgree: !item.isAgree };
      return withChild(item, !item.isAgree);
    }),
  };
};

withChild는 하위 탐색을 진행하며 자신의 agreeStatus도 변경하기 때문에, 굳이 따로 주입해주지 않고 인자로 전달해주면 연쇄적으로 작동이 되겠네요!

하위 약관 리스트의 상태를 부모 약관으로 전파하기

위 섹션에서 말한 문장을 다시 가져와 보겠습니다.

보통 상위 약관의 동의 여부는 하위 약관 전체를 동의하느냐에 따라 제어됩니다.

그렇다면 상위 약관이 미동의임에도 하위 약관 전체가 동의면 상위 약관도 동의가 될 것이고,
반대로 상위 약관이 동의임에도 하위 약관이 단 하나라도 미동의면 상위 약관도 미동의가 되어야 겠네요!

구현해 둔 pickAgree 함수를 조금만 변경하면 구현할 수 있습니다!

const pickAgree = (
  agreement,
  identifierList,
  idx
) => {
  const toggledList = agreement.list.map((item) => {
    if (item.id !== identifierList[idx]) return item;
    if (identifierList[idx + 1])
      return pickAgree(item, identifierList, idx + 1);
    return { ...item, isAgree: !item.isAgree };
  });
  const isEveryAgree = toggledList.every((item) => item.isAgree);
  const isDisagree = toggledList.find((item) => !item.isAgree);
  
  return {
    ...agreement,
    isAgree: <-
    list: toggledList,
  };
};

바로 list에 주입하여 return하던 재귀 리스트 값을 toggledList로 저장한 후,
해당 리스트의 isAgree 값을 찾아 현재 아이템의 isAgree 값을 변경해주면 됩니다!

const currentIsAgree = 
	isEveryAgree ? true
      : isDisagree ? false
        : !item.isAgree

동의는 약관 리스트가 전부 동의여야 변경되지만,
미동의는 단 하나라도 미동의면 바로 변경된다는 점을 유의해야 합니다!

마무리

알고리즘에서만 사용하던 재귀 함수와 BFS, 트리 구조를 실무에서 사용할 일이 생겨
굉장히 흥미로운 경험이었습니다.

이외에도 댓글 하위 답글 하위 답글 ... 좋아요 버튼과 같은 요구사항에서도 비슷한 방식으로 재귀 컴포넌트를 적용할 수 있을 것 같네요!

상태 관리가 간편한 단 한 번의 렌더링으로 확장성 있게 요구사항을 해결하고 싶으시다면 해당 방법을 추천드립니다!