시점 이동 줄이기 | Frontend Fundamentals

[giscus[bot]]

시점 이동 줄이기 | Frontend Fundamentals

변경하기 쉬운 프론트엔드 코드를 위한 지침서

https://frontend-fundamentals.com/code/examples/user-policy.html

[ethan-sh-lee]

좋은 글 잘읽었습니다.

아래는 A. 조건을 펼쳐서 그대로 드러내기의 또다른 구현입니다. Solidjs의 Switch, Match 컴포넌트의 영향을 받았습니다.

결과 먼저 보여드리겠습니다.

function Page() {
  const user = useUser();

  return (
    <Switch>
      <Case when={user.role === "admin"}>
        <div>
          <Button disabled={false}>Invite</Button>
          <Button disabled={false}>Read</Button>
        </div>
      </Case>
      <Case when={user.role === "viewer"}>
        <div>
          <Button disabled={true}>Invite</Button>
          <Button disabled={false}>Read</Button>
         </div>
       </Case>
       <Case isDefault>{null}</Case>
    </Switch>
)

switch문 역할을 하는 유틸 컴포넌트 Switch와 Case를 추가하였습니다.

type CaseType = {
  when?: boolean;
  isDefault?: boolean;
};

const Case = ({
  children,
}: CaseType & { children: React.ReactNode }): React.ReactNode => {
  return children;
};

const Switch = ({
  children,
}: {
  children: React.ReactElement<CaseType>[];
}): React.ReactNode => {
  const defaultComponent = children.find((child) => child?.props?.isDefault);
  const resultComponent = children.find((child) => child?.props?.when);
  return resultComponent || defaultComponent;
};

[Johnyworld]

재밌는 컴포넌트 소개 감사합니다.
switch 문과 조금 더 비슷해보이려면, 비교 기준 값을 Switch 컴포넌트에서 받고 context 로 Case 컴포넌트로 뿌려주는 것도 방법이겠네요 :)