230925 - React 컴포넌트의 유연성과 최적화 ( 조건부 렌더링, 다이나믹 컴포넌트, 고차컴포넌트(HOC))

오늘 내가 배운 것

1. 조건부 렌더링

2. 다이나믹 컴포넌트

3. 고차 컴포넌트(HOC)

 

 

 

React Component의 유연성과 최적화

React를 이용하면서 컴포넌트를 다룰 때, 렌더링 최적화하는 여러 방법이 있다.
여러 방법 중 3가지를 최근에 접하게 되었고, 이에 대해서 살펴보려고 한다.

각 방식의 렌더링 최적화 측면과 적용 상황을 정리하였다.

1. 조건부 렌더링

1-1. 렌더링 최적화

조건부 렌더링은 필요한 부분만 렌더링을 수행하기 때문에 렌더링 성능에 도움을 줄 수 있다. 불필요한 컴포넌트의 렌더링을 방지하기 때문에 페이지의 성능을 향상할 수 있다.

1-2. 적용 상황

간단한 조건에 따른 뷰 변경이 필요할 때 사용한다. 자주 변경되는 UI 부분에 유용하다.

주의 : 복잡한 조건이나 중첩된 조건이 많아지면 코드가 복잡해질 수 있다. 그리고 컴포넌트의 라이프사이클을 고려할 때는 조건부 렌더링만으로 부족할 수 있다.

1-3. 적용 예시

const App = (props) => {
    if (props.isLoggedIn) {
        return <Dashboard />
    } else {
        return <Login />
    }
}

2. 다이나믹 컴포넌트

2-1. 렌더링 최적화

코드 분할과 지연 로딩을 통한 성능 최적화에 유용할 수 있다. 예를 들어, 다이나믹 임포트를 통해 런타임에 필요한 컴포넌트만 로딩할 수 있습니다. 그렇기 때문에 초기 로딩 성능을 개선할 수 있다.

2-2. 적용 상황

여러 컴포넌트 중 하나를 동적으로 선택해야 할 때 사용한다.

주의 : 모든 컴포넌트가 공통된 props나 상태를 공유해야 하는 경우에는 적합하지 않을 수 있다. SSR을 사용하는 경우 다이나믹 임포트를 주의해야 한다.

2-3. 적용 예시

const Dashboard = () => <div>Dashboard</div>
const Login = () => <div>Login</div>

const App = (props) => {
    const { id } = props
    const DynamicComponent = props.componentType === "Dashboard" ? Dashboard : Login

    return <DynamicComponent id={id} />
}

3. 고차 컴포넌트(HOC)

Higher-Order Component로 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환한다.

3-1. 렌더링 최적화

고차 컴포넌트 자체는 렌더링 성능을 직접적으로 최적화하는 것은 아니지만 고차 컴포넌트를 통해 렌더링 로직을 분리하거나 제어할 수 있기 때문에 간접적으로 최적화에 도움을 줄 수 있다.

주의 : 코드의 재사용성에는 좋지만 너무 많은 로직을 HOC로 분리하게 되면 컴포넌트 구조가 복잡해질 수 있다. props 네이밍 충돌이 발생할 가능성이 있다.

3-2. 적용 상황

코드의 재사용성과 유지 보수성을 높이는데 주로 사용된다.

3-3. 적용 예시

// id에 따른 컴포넌트 변경
const withLogger = (WrappedComponent) => {
    return (props) => {
        return <WrappedComponent {...props} />
    }
}

const MyComponent = (props) => {
    return <div>{props.id}</div>
}

const MyComponentWithLogger = withLogger(MyComponent)

 

---