2022/09/16 - TIL

바닐라 자바스크립트 렌더 최적화하기

바닐라 자바스크립트로 웹페이지를 만들 때 MVC 아키텍처를 기본으로 잡고 페이지를 많이 만들을 때 전체 렌더가 자주 일어나는 것으로 효율이 좋지 않다는 것을 알게되었다. 일반적으로 한 자바스크립트 파일내에서 상태를 관리하는 객체 state를 만들고 setState를 이용하여 변경된 값을 바꾸는 방식을 통하여 상태를 관리하였다.

const setState = (newState) =>{
	state = [...state, ...newState)]
	render()//혹은 render(state)
}

위의 방법대로 페이지를 만들면, 페이지 렌더링이 상태의 값 1개가 바뀌면 페이지 전체를 처음부터 다시 로드를 하기 때문에 효율이 좋지 않다. 효율지 좋아지기 위해서 어떤 방법이 있을까 고민을 하다가 한가지 방법을 생각 하였다. 변경된 state를 render에 반영하는 방법이다.

const setState = (newState) =>{
	state = [...state, ...newState]
	render(newState)
}

위의 방법을 이용하면 렌더함수내에서 새로 바뀐 상태 객체의 값 혹은 키값을 받을 수 있다.

const render = newState=>{
	const keyList = Object.key(newState);
	if(keyList.includes('something') function1()
	function2()
}

function1같은 경우에는 setState에 있는 state에 있는 something 키값이 변경되었을 때만 실행이 되는 함수이다. function2()같은 경우에는 상태가 바뀔때마다 모두 실행되는 함수이다.

위의 방법처럼 변경되는 키값 혹은 모든 경우에서 상태를 실행시키는 방법으로 페이지를 효율적으로 렌더링할 수 있다.

주의할 것 :

오늘 한 40분정도 시간을 소모한 문제가 있었다. 바로 렌더함수에서의 함수의 순서가 예상과 다른 결과를 만들어 낼 수 있다. 사실 싱글 스레드인 자바스크립트 렌더 엔진의 구조를 생각하면 당연하게 위에서 아래로 읽힌다고 할 수 있지만, M V C를 따로따로 떨어뜨려놓고 에러를 찾다보면 model에서 에러를 자주 찾게 되기 때문에 render의 순서 역시 원하는 결과를 나타내지 못하게 하는 원인이 될 수 있다는 것을 명심하는 것이 좋다.