개발공부/리액트
[리액트] HOC 고차 컴포넌트
햄❤️
2021. 7. 14. 10:13
728x90
1. 고차 컴포넌트란? (Higher-Order Components)
- 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수
- (●'◡'●) 컴포넌트 로직을 재사용하기 위한 아주 고오급 리액트 기술입니다
const HOC = ReactComponent => EnhancedReactComponent;- 여기에서 EnhancedReactComponent는 ReactComponent의 props를 변경 한다거나, ReactComponent에 새로운 props를 추가하여 전달한다거나 아예 새로운 컴포넌트를 return 할 수 있다.
2. 네이밍 팁
- Container HOC를 제외하고, 보통 HOC를 통해 새로운 prop을 주입 할 때 많이 사용 하는 규칙은 with로 시작하여 with**NewPropName** 식으로 네이밍하는게 좋다. 예를들면, withLoading, withAuth 등으로 주입 될 prop 명을 적어주는 식으로 말이다. 이렇게하면 실제로 HOC가 사용되는 컴포넌트에서 prop을 확인 할 때, 이 prop이 어디에서 왔는지 명확히 알 수 있기 때문이다.
3. 활용
🌈 종합하자면, 반복될 수 있는 코드들을 HoC를 만들어서 해결할 수 있다.
- **Container 컴포넌트와 Presentational 컴포넌트** 분리: 비즈니스 로직을 담당하는 컴포넌트(Container 컴포넌트)와 디스플레이를 담당하는 컴포넌트(Presentational 컴포넌트)를 분리하여 사용 할 때, 컨테이너 컴포넌트를 HOC를 만들어서 사용 할 수 있다.→ redux 파일과 page 폴더의 컴포넌트들을 생각해보면 쉽다
- 로딩 중 화면 표시: 보통 SPA(Single Page App)에서 화면이 로딩 중일 때, Skeleton 화면을 보여주고, 로딩이 완료되면 데이터를 보여줄 때 사용 할 수 있다.
- 유저 인증 로직 처리: 컴포넌트 내에서 권한 체크나 로그인 상태를 체크하기 보다는 인증 로직을 HOC로 분리하면 컴포넌트 재사용성도 높일 수 있고, 컴포넌트에서 역할 분리도 쉽게 할 수 있다.
- 에러 메세지 표시: 컴포넌트 내에서 분기문(if/else 등)을 통해 처리 할 수도 있지만, 분기문을 HOC로 만들어 처리 하면 컴포넌트를 더욱 깔끔하게 사용 할 수 있다.
4. 활용 예제
1) 간단예제_1번
const withLoading = WrappedComponent =>
props => props.isLoading ? <div>Loading ...</div> : <WrappedComponent {...props} />;이 HOC(withLoading)는 isLoading prop을 받아서 이 값이 true 일 땐 로딩 컴포넌트를 렌더링 하고, false 일 때는 원하는 컴포넌트(WrappedComponent)를 렌더링 해주는 HOC이다.
2) 실제 프로젝트 예제_2번
동물마켓 프로젝트 했을때 사용했던 HOC 예시
1) HOC auth.js 파일로 **로그인 여부 확인 & 로그인 되어 있으면 유저 정보 체크하는 컴포넌트 생성**
2) App.js 에서 유저 정보에 따라 분기되는 화면이 다른 컴포넌트에다가 auth.js로 감싸주었다.
네이밍 컨벤션을 알았더라면 withAuth.js 라고 만들었을텐데 아쉽다.
이렇게 하면 유저 정보를 확인해야하는 컴포넌트마다 auth.js 코드를 사용하지 않으니 ⭐코드량이 줄었다.⭐
출처
728x90