Vanilla Javascript로 컴포넌트 만들기

바닐라 자바스크립트로 쇼핑몰 SPA를 구현하기 위해, 가장 기본이 될 컴포넌트를 정의했다. 황준일님의 글을 참고해 초안을 짜고, 수정을 거쳤다.

기존 코드

Component 클래스

• constructor: 컴포넌트를 생성한다. 즉 초기 state/props를 설정하고, template 연산의 결과물인 마크업을 렌더링하고, 이벤트리스너를 등록한다.
• setup: 초기 state를 설정한다.
• mounted: 하위 컴포넌트들의 생성자 함수를 호출한다. 
• template: 컴포넌트의 state를 반영한 마크업을 리턴한다.
• render: $target내에 마크업을 렌더링한다. 그 다음 mounted 함수를 호출한다.
• setState: 상태를 업데이트하고, render 함수를 호출한다.

---

mounted 메서드를 좀 더 자세히 살펴보자.

위 Component 클래스로 생성한 인스턴스 예시

예시로 황준일님의 글 의 일부 코드를 발췌해왔다.  mounted는 하위 컴포넌트의 생성자 함수를 호출하는데, 이때 인자로 $target과 props를 넘긴다.

 

template 함수를 보면 하위 컴포넌트들의 컨테이너가 될 마크업들이 있다. 각 하위 컴포넌트에 맞는 마크업을 $target으로 넘긴다. 이게 바로 render-mounted 순서로 실행되어야 하는 이유이다. 컨테이너 역할을 할 마크업이 DOM에 존재해야(render) 하위 컴포넌트들이 해당 DOM의 innerHTML로 자신의 마크업을 렌더링할 수 있다.

 

---

한편 상태가 변경되면 다음의 과정이 발생한다.

setState ➡️ render() 실행 ➡️ mounted() 실행

mounted()에서는 하위 컴포넌트들의 생성자 함수가 호출된다. 컴포넌트의 상태가 변경되었기 때문에, 하위 컴포넌트들은 새로운 props를 바탕으로 컴포넌트를 생성하게 된다.

 

 

API 요청 시점 결정하기

서버로부터 받아온 상품 목록을 렌더링해야 한다. 그렇다면 위와 같이 정의한 컴포넌트 라이프사이클에서 API 요청은 언제 이뤄져야 할까? 해당 질문에 답하기 위해 리액트 컴포넌트의 라이프사이클을 참고해보았다.

 

React Component Lifecycle

 

1. 리액트로 개발했을 때를 생각해보면 API 호출은 useEffect에서 했다. 따라서 컴포넌트의 사이클 상 useEffect에 해당하는 메서드에서 API를 호출하면 될 것이다.
2. 그렇다면 useEffect는 언제 실행되는가? useEffect는 render 이후에 실행된다. componentDidMount, componentDidUpdate, componentWillUnmount를 합친 게 useEffect라고 할 수 있다.
3. (결론) 기존 코드에서 useEffect에 해당하는 mounted 메서드 내에서 API를 호출하자.
4. 다만 기존 코드에서는 상태가 변경될 때마다 mounted가 호출된다. mounted 메서드가 componentDidMount와 componentDidUpdate를 포괄하고 있는 느낌. 따라서 updated메서드를 추가하기로 했다. 이로써 mounted는 컴포넌트 생성 시에 한 번만 실행된다. 상태가 변경될 경우 mounted 대신 updated가 실행된다.

 

수정한 코드

수정된 Component 클래스

componentDidMount와 componentDidUpdate가 혼재되어 있던 mounted메서드로부터, componentDidUpdate에 해당하는 updated메서드가 분리되었다.

 

API 요청은 다음의 과정을 거친다.

1. mounted함수 내에서 API 요청
2. 응답 결과로 setState함수 호출
3. setState함수는 render함수를 호출한다.
4. render함수는 updated함수를 호출하므로, 변경된 state값이 하위 컴포넌트에도 반영된다.