Vue 22일차 - 하이오더컴포넌트(HOC)

하이 오더 컴포넌트는 컴포넌트 코드를 재사용하기 위해 사용한다.

 

자세한 소개 문서

https://reactjs.org/docs/higher-order-components.html

Higher-Order Components – React

 

 HOC 사용 순서는 같다.

 

1. HOC를 사용하기 위한 js 파일을 생성한다.

HOC를 위한 js 파일

2. HOC 사용을 위한 API를 신규로 작성한다.

API 파일 생성

3. Vuex의 store의 action, mutation, state에서 api를 조회 후 데이터 저장할 수 있도록 한다.

actions

mutations

state

4. HOC에서 받은 데이터를 랜더링하기 위한 Vue파일을 생성한다.

Vue 파일

실행 순서는 다음과 같다.

 

1. HOC js 파일에서 actions를 dispatch를 통해 실행한다. 실행할 때 현재 화면 이름을 넘긴다.

2. actions에서 api를 호출해서 데이터를 조회한다. 실행할 때 받은 화면 이름을 api에 넘긴다.

3. api에서 화면 이름을 받아서 해당 화면에 대한 api를 호출한다.

4. api 결과 값을 받아서 mutation을 실행한다.

5. mutation에서 state에 저장한다. state의 값은 store에 저장된 상태.

6. HOC js 파일에서 랜더링을 진행한다.

7. 랜더링 된 Vue 파일에서 컴포넌트를 실행한다.

8. 호출된 컴포넌트에서 state의 list(HOC 데이터)를 받은 뒤 화면에 뿌린다.

 

 

HOC와 공통 컴포넌트 차이점은?

공통 컴포넌트를 제작하여 만들면 HOC와 동일한 구성을 할 수 있다.

다만, 공통 컴포넌트의 경우 내가 원하는 값을 넘기기 어렵다는 단점이 있다.

HOC는 내가 원하는 값을 넘기게 됨으로서 컴포넌트 구조를 정의할 수 있다.

 

만약 공통된 데이터를 받아서 화면을 만들 수 있다. -> HOC 사용

틀만 동일하고, 각자 다른 데이터를 받아서 뿌려야 한다. -> 공통 컴포넌트 사용