2023.03.02) 항해 25일차

오늘은 버츄얼돔과 렌더링에 대해 다시 짚어보았다.

다시 짚어보다가 렌더링 최적화에 대해 알게 되었다..

 

최적화를 하기 위해서 무엇을 해야하는지 알아고보, 시도도 해보았지만

아쉽게도 실패했다..ㅠ

 

렌더링 최적화를 하기 위해서는 어느 한 부분에 리렌더링이 일어날 때,

하위의 컴포넌트도 렌더링이 되지 않도록 연결고리를 끊어야 한다는 것은 알았다.

하지만 어떻게 해야할지 몰라서 이 부분은 더 찾아보고 시도해야할 듯하다.

못하니까 괜히 오기가 생기는.......

 

렌더링 최적화 외에 흥미가 생기는 주제가 또 있었다.

바로, '컴파운드 컴포넌트 패턴'이다.

개발자의 입장에서 컴포넌트의 구조를 한 눈에 보기 좋고,

좀 더 수정 등의 유지보수가 간단하게 짤 수 있는 컴포넌트 형태에 대한 방법이다.

* 컴포넌트 하나에 props를 전달하는 방식
	* 이 컴포넌트가 어떤 역할을 하는지를 한 눈에 보았을때 추측하기 어렵다.
	* 수정사항이 생길 경우 전달해야 할 props가 늘어날 수 있고, 불필요한 props까지 전달하게 되는 상황이 생길 수 있다. + props가 늘면 코드도 더욱 복잡해진다.
	=> 유지보수 측면에서 어려울 수 있다.

<Modal
  buttonName={"열어주세요."}
  contents={"안녕하세요"}
  fontColor="white"
  bc="red"
  buttonSize="large"
  margin="10px"
  position="right"
/>

-------

const Modal = ({ buttonName, contents, bc, fontColor, buttonSize, margin }) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        style={{
          backgroundColor: bc,
          color: fontColor,
          width: buttonSize === "large" ? "120px" : "50px",
          margin: margin ? margin : "none"
        }}
        onClick={() => setOpen((pre) => !pre)}
      >
        {buttonName}
      </button>
      {open ? <div>{contents}</div> : null}
    </>
  );
};

한눈에 보기 어려운 이 코드를 컴파운드 컴포넌트 패턴으로 다시 작성하면,

* 컴파운드 패턴
	* 대부분의 인자를 children으로 전달하고, 수정이 간단하다.
	* 굳이 타고 들어가지 않아도 어떤 인자가 어디로 어떻게 전달되는지 추측하기 쉽다.
	* props를 늘려서 코드가 복잡해질 일도 없고, props driling도 상대적으로 줄일 수 있다.
	=> 유지보수 측면에서 좋은 방법

<ComModal.Root>
  <ComModal.Trigger>
    <Button fontColor="white" bc="red" buttonSize="large">
      열기
    </Button>
  </ComModal.Trigger>
	<ComModal.Content>안녕하세요</ComModal.Content>
</ComModal.Root>

------

const Context = createContext();

export const ComModalRoot = ({ children }) => {
  const [open, setOpen] = useState(false);
  return (
    <Context.Provider
      value={{
        open,
        setOpen
      }}
    >
      {children}
    </Context.Provider>
  );
};

const ComModalTrigger = ({ children }) => {
  const { setOpen } = useContext(Context);
  return <div onClick={() => setOpen((pre) => !pre)}>{children}</div>;
};

const ComModalContent = ({ children }) => {
  const { open } = useContext(Context);
  return <div>{open ? children : null}</div>;
};

이렇게 한 눈에 보기 편한 코드가 된다.

아직은 완벽하게 이해한 것은 아니지만 이 방법에 대해 좀 더 깊게 알아볼 필요성을 느꼈다.