같이 실행되지 않는 코드 분리하기 | Frontend Fundamentals

[giscus[bot]]

같이 실행되지 않는 코드 분리하기 | Frontend Fundamentals

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

https://frontend-fundamentals.com/code/examples/submit-button.html

[Joong-Sunny]

좋은내용 공유해주셔서 감사합니다

[logan2837]

해당 방법의 단점도 고려해주신다면 문서 내용이 균형적인 관점에서 더욱 좋아질 거 같아요!

[okinawaa]

개발을 하다보면, AdminSubmitButton와, ViewerSubmitButton에서 랜더링 하는 컴포넌트에 공통적으로 처리해야할 부분도 많아질 것 같은데요. 수정사항이 발생할때마다 두 곳 모두를 사람의 머리로 기억하고 수정해야한다는 문제가 있고 휴먼에러를 발생시킬 수 있는 부분일 것 같습니다.

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}

function ViewerSubmitButton() {
  return <Button disabled css={{
  background: ...
  border: ...
  shadow: ...
}}>Submit</Button>;
}

function AdminSubmitButton() {
  useEffect(() => {
    showAnimation();
  }, []);

  return <Button type="submit" css={{
  background: ...
  border: ...
  shadow: ...
}}>Submit</Button>;
}

위와 같은 상황에서 버튼의 색상을 수정해야하는 경우가 있을때 한 곳은 놓치기 쉬울 것 같아요. 물론 또 스타일을 공통 모듈을 사용할 수 있지만 그러면 컴포넌트를 나눈 이유가 또 사라질 것 같네요.

[jinchuu1391]

공통적인 스타일이 적용된 하나의 베이스 버튼을 만들어 사용하는 방법도 있겠네요

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}

function ViewerSubmitButton() {
  return <ButtonBase disabled>Submit</ButtonBase>;
}

function AdminSubmitButton() {
  useEffect(() => {
    showAnimation();
  }, []);

  return <ButtonBase type="submit">Submit</ButtonBase>;
}

function ButtonBase() {
  return (<Button css={{
    background: ...,
    border: ...,
    shadow: ...,
>Submit</Button>)
}

[Dong1333]

1번 코드

const userRole =  useRole();
const isViewer = userRole ==="viewer";

2번 코드

const isViewer = useRole() === "viewer";

(코린이 입니다 👀)
지금까지 'userRole'값의 '재사용 가능 여부'와 관계없이 무조건적으로 1번 방식으로만 작성했었는데
2번과 같은 방법 직접 할당)도 있었네요..!

덕분에 1번에 비해 '코드 간결성'과 '메모리 사용 측면에서 더 유리'하게 사용할 수 있을 거 같아요! 감사합니다!! 😁