React Composition

Composition : 합성

의미 : 둘 이상의 것을 합쳐서 하나를 이룸.

왜 사용할까?

React 컴포넌트의 재사용성을 높여이기 위해.

반복되는 컴포넌트 예시

import React from 'react';

// 재사용 가능한 컴포넌트 정의
export const CompositionFlexLayer = () => {
    return (
        <div className="flex-item">
           0 
        </div>
    );
}

export const CompositionFlexLayer1 = () => {
    return (
        <div className="flex-item">
           1
        </div>
    );
}

export const CompositionFlexLayer2 = () => {
    return (
        <div className="flex-item">
            2
        </div>
    );
}

 

변하지 않는데 반복되는 부분을 찾아내서 컴포넌트로 선언

• Flex 컴포넌트와 FlexItem을 분리

export const Flex = ({children}: { children: ReactNode }) => {
    return (
	   	 {children}
    )
}

export const FlexItem = ({children}: { children: ReactNode }) => {
    return (
		{children}
    )
}

 

• 합성

export const CompositionFlexLayer = () => {
    return (
        <Flex>
            <FlexItem>Flex Item 1</FlexItem>
            <FlexItem>Flex Item 2</FlexItem>
        </Flex>
    )
}

컴포넌트를 조합하고 의도를 더 명확하게 드러내기 위해 합성(Composition)을 사용.

Prop Drilling을 피하기 위한 합성

Prop Drilling 발생하는 케이스

 export const ParentComponent = ({ children }: { children: ReactNode }) => {
    const [data] = useState(0);

    return (
      <div>&nbsp;</div>
    )
}

const MiddleComponent = ({ data }: { data: number }) => {
    return (
      <div>&nbsp;</div>
    )
}

const ChildComponent = ({ data }: { data: number }) => {
    return (
      <div>{data}</div>
    )
}

data를 깊은 컴포넌트에게 까지 계속해서 전달하고있다.

관심사를 분리하여 컴포넌트를 더 재사용 가능하게 만들고, 가독성을 높이며, 유지 보수성을 향상시켜 보자.

export const ParentComponent = ({ children }: { children: ReactNode }) => {
    const [data] = useState(0);

    return (
        <div>{children}</div>
    )
}

 

Prop Drilling을 피하기 위한 합성을 알아보았다.

불필요한 렌더링을 방지할 수 있다.

합성을 사용하면 불필요한 렌더링을 방지하는데 효과적이다.

export const CounterLayerLegacy = () => {
    const [count, setCount] = useState(0);

    function clickHandler() {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>Counter</h1>
            <button onClick={clickHandler}>카운트 증가</button>
            <div>{count}</div>
            <div>
                <h1>나는 다른 컴포넌트</h1>
                {Math.random()}
            </div>
        </div>
    );
}

상관없는 영역의 렌더링까지 진행 될 수있는것을 확인 해 보았다.

합성을 사용한다면, 이부분을 개선 할 수 있다.

export const CounterLayerComposition = () => {
    return (
        <div />
    );
}
export const CounterLayer = ({ timeLayer }: { timeLayer: ReactNode }) => {
    const [count, setCount] = useState(0);

    function clickHandler() {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>Counter</h1>
            <button onClick={clickHandler}>카운트 증가</button>
            <div>{count}</div>
            {timeLayer}
        </div>
    );
}

const RandomNum = () => {
    return (
        <div>
            <h1>나는 다른 컴포넌트</h1>
            {Math.random()}
        </div>
    );
}

 

 

합성을 통해 불필요한 렌더링을 없앤것을 확인 할 수 있다.

정리

• 관심사를 분리하자
  • 재활용성 증가
  • 유지보수성 향상
  • 가독성 향상
• 합성을 통해
  • Prop Drilling 피하자
  • 불필요한 렌더링을 피하자

참고

https://felixgerschau.com/react-rerender-components/