[트러블 슈팅] Vue2 컴포넌트 렌더링 순서 이슈

요건

셀렉트 박스에서 기본 선택값이 노출되어야 함

이슈

부모 컴포넌트의 mounted에서 기본값을 세팅한 후, 자식 컴포넌트의 props로 전달해주고 있는데, 화면에서는 기본값이 선택되어 보이지 않았다. vue 개발자도구로 확인해 보아도 부모 컴포넌트의 data와 자식 컴포넌트의 props는 제대로 나오고 있었다.

원인

부모 컴포넌트의 mounted와, 자식 컴포넌트의 created에서 해당 값을 콘솔로 찍어보았더니, 자식 컴포넌트에서 로그가 먼저 찍힌 후 부모 컴포넌트에서 찍히고 있었다. 렌더링 순서의 문제로 파악되었다.

해결

컴포넌트 렌더링 순서를 확인해본 결과 다음과 같았다.
created는 부모 → 자식 순, mounted는 자식 → 부모 순

자세히 보면 다음과 같다.
부모 data 등 정의 → 부모 created → 자식 data 등 정의 → 자식 created → 자식 렌더링 → 자식 mounted → 부모 렌더링 → 부모 mounted

부모 컴포넌트에서 mounted에서 기본값을 설정해주던 로직을 created로 옮겼더니 정상적으로 기본값이 노출되었다.

참고) https://velog.io/@singco/vue%EC%9D%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EB%A5%BC-%ED%99%95%EC%8B%A4%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90