구현 상세 추상화하기 | Frontend Fundamentals

[giscus[bot]]

구현 상세 추상화하기 | Frontend Fundamentals

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

https://frontend-fundamentals.com/code/examples/login-start-page.html

[oht1221]

안녕하세요 좋은글 잘 읽었습니다 :)

설명 읽다가 의문이 드는 점이 있는데요, 혹시 코드예시2의 InviteButton 컴포넌트에서 title={`${data.name}님에게 공유해요`} 이부분은 title={`${name}님에게 공유해요`} 이 되는게 맞는 거 같은데 제가 제대로 이해한게 맞을까요?

[Kimbangg]

@oht1221
충분히 헷갈릴 수 있겠군요. 혹시 해당 부분 수정해서 PR 올려주실 수 있을까요?

[jungsikjeong]

안녕하세요 좋은 글 잘 읽었어요! 궁금하게있는데요.

export function FriendInvitation() {
  const { data } = useQuery(/* 생략.. */);

  // 이외 이 컴포넌트에 필요한 상태 관리, 이벤트 핸들러 및 비동기 작업 로직...

  return (
    <>
      <InviteButton name={data.name} />
      {/* UI를 위한 JSX 마크업 */}
    </>
  );
}

function InviteButton({ name }) {
  return (
    <Button
      onClick={async () => {
        const canInvite = await overlay.openAsync(({ isOpen, close }) => (
          <ConfirmDialog
            title={`${data.name}님에게 공유해요`}
            cancelButton={
              <ConfirmDialog.CancelButton onClick={() => close(false)}>
                닫기
              </ConfirmDialog.CancelButton>
            }
            confirmButton={
              <ConfirmDialog.ConfirmButton onClick={() => close(true)}>
                확인
              </ConfirmDialog.ConfirmButton>
            }
            /* 중략 */
          />
        ));

        if (canInvite) {
          await sendPush();
        }
      }}
    >
      초대하기
    </Button>
  );
}

위 코드에서
버튼에 이벤트핸들러 코드를 따로 명시하지않고 한번에 달아놓은 상태인데, 예시를 위해서 이렇게 작성해둔걸까요?

...
const onClick =()=>{...}

return (
 <button onClick={onClick}>버튼</button>
)

이렇게하는게 더 좋은 코드일까요?..

초보개발자라 사소한거에 궁금증이 일어나서 죄송합니다..

[hasunpark]

useCallback을 통해 해당 함수를 memorization 하는게 아닌이상 퍼포먼스적으로는 동일하다고 알고있습니다. 그래서 저같은 경우는 로직이 너무 방대해져서 인라인으로 넣는게 컴포넌트 가독성을 저해하는게 아닌이상 따로 빼지않습니다

[jungsikjeong]

@hasunpark 답변감사합니다! 말씀하신 부분들 많은 도움 됐습니다.😭

[Jaeppetto]

안녕하세요! 좋은 글 감사합니다.

예시 1의 리팩토링 방향으로 두 가지 옵션(Wrapper, HOC)을 제시해주셨는데, 해당 예시 상황에서는 둘 중 어떤 방식이 더 적합하다고 생각하시는지 궁금해요!

일반적으로 Auth Check는 페이지 단위로 이루어지니, 라우트 구조와 함께 명시적으로 확인할 수 있는 Wrapper가 적합하다고 생각되면서도, 추후 기능이 확장되는 것을 고려하면 compose로 컴포넌트의 depth 유지가 가능한 HOC가 적합할 것 같기도 하고요..🤔