[TIL] 2023-0104 : 프리온보딩) 1주차 과제 리뷰, 리액트 렌더링 최적화

🐈오늘 배운 것

✔️1주차 과제 리뷰

지난 1주차 과제는 사전과제였던 todo list 를 리팩토링하는 것이었다. 팀 내에서 Best Practice 를 정해서 산출하는 것이었는데 오늘 라이브 세션에서는 그 과제를 전체적으로 리뷰해주시는 시간을 가졌다.

 

변수,함수명 짓기

이름만 보고도 어떤 역할을 하는지 파악할 수 있도록 잘 지어야 하는데, 오늘 피드백에서는 정확히 어떤 점을 주의하면 더 잘 지을 수 있는지 구체적으로 말씀해주셔서 좋았다. 예를 들어,

 const regexp = getRegexVerification(name as 'email' | 'password', value)

위와 같은 코드가 있다고 할 때, regexp 가 최종적으로 가지게 되는 값은 Verification 을 거쳐 산출된 어떤 boolean 일 가능성이 높기 때문에, 마치 정규표현식을 의미하는 것같은 regexp 라는 변수명은 직관적이지 않다.

또 getRegexVerification 이라는 함수 명도, 이 verification 의 대상이 늘 regexp 가 아닐 수도 있기 때문에 - 변화할 가능성이 있기 때문에 대처를 위해 세부적인 구현 방식 즉 regexp 라는 내용을 제외하여 함수 명을 지어도 된다.

 

async,await

예시 코드에서 api 호출 함수를 만들 때 특정한 상황 예를 들면 response 값의 파싱된 데이터가 필요하다거나 이런 상황이 아니라 단순 api 호출을 실행하기만 하는 함수라면 await을 사용할 필요가 없다. 

const getTodo = async () => {
  const res = await client.get('/todos');
  return res;
};

const getTodo = () => {
	return client.get('/todos');
};

// const todos = await getTodo();

위 코드와 같이 작성하는 경우, 호출부에서도 await 을 사용해야하기 때문에 await 이 중복된다. axios 요청 자체가 Promise 값을 리턴하고 있기 때문에 위와 같이 사용하나 아래와 같이 사용하나 차이가 발생하지 않는다. 그리고 놀랍게도 우리의 코드가 위의 예시와 동일한 실수를 저지르고 있었다. 단순히 await 을 사용하는게 가독성이 높다고 하니까~ 라고 생각하면서 썼는데 정확한 용법을 파악하지 않은 실수다..

✔️리액트 렌더링 최적화

리액트에서 state를 사용하는 이유 : ui를 업데이트하기 위해서. 그래서 setState를 사용하여야만 정확한 변경 시점을 알 수 있고 적절한 시점에 리렌더링이 되면서 화면을 업데이트 할 수 있다. state가 변경되면 그 해당 컴포넌트 뿐만 아니라 하위 컴포넌트까지 모두 리렌더링이 되는데 경우에 따라서는 하위 컴포넌트에게는 불필요한 리렌더링이 될 수 있다.

 

프론트엔드에서 성능을 저하시키는 요인 중에는 브라우저의 렌더링 과정 중 발생하는 반복적인 리플로우와 리페인트가 있는데, ui가 불필요하게 많이 업데이트되면 이 과정이 발생하기 때문에 성능 최적화를 위해 불필요한 리렌더링을 방지해야할 필요가 있다.

 

리액트에서 이렇게 부모 컴포넌트와 자식 컴포넌트를 함께 리렌더링 하는 이유는 props가 변경되었는지를 검사하는 것또한 비용이 발생하는 일이기 때문이다. 이처럼 최적화라는 것도 필요한 시점에 분명한 이유가 있을때 실행되는 것이 맞지 무조건 좋다고 해서 실행하는 것은 비용을 낭비하는 것일 수도 있다. 만약 정말 불필요한 렌더링이 너무 일어나서 성능이 저하되는 것 같다면 아래의 방법을 시도해볼 수 있다.

 

React.memo 사용하기

리액트에서는 state가 변경되면 리렌더링이 일어난다. 내가 자식 컴포넌트인데, 나에게 해당되는 어떤 state도 없고 부모에게서 받은 props 에도 변경이 없다면 굳이 리렌더링이 일어나야할까? 이때는 렌더링을 방지하고 싶은 컴포넌트를 React.memo 메서드에 첫 번째 인자로 전달해주면 된다. React.memo 는 컴포넌트의 렌더링 결과를 메모이징 해둔 뒤에 다음 렌더링이 일어날 때 이전 렌더링과 props를 비교해서 변경사항을 확인한다. 

 

불변성을 고려하자 : useMemo, useCallback

함수 컴포넌트에서는 매번 리렌더링 될 때마다 새로운 함수가 호출되고 여기서 생성된 값이나 함수들은 모두 기존과 다른 새로운 값이다. useMemo, useCallback 으로 생성된 값이나 함수는 매번 새롭게 생성되는 것이 아니라 특정한 조건에 의해 생성되었을 때의 그 값을 별도의 공간에 저장해둔다.

 

리액트에서 이전과 현재의 state 나 props 변경 여부를 파악하기 위해서는 불변성이 중요하다. 어떤 값이 저장된 메모리에 덮어 씌워진 것이 아니라 새로운 메모리주소의 새로운 값인지를 판단하여 같다,아니다를 판단한다. React.memo 에서 props를 비교하는 것도 이와 같은 원리라서, 이전과 같은 값이라는 동일성이 없으면 props가 변경된 것으로 판단한다. 또 객체를 shallow copy 로 확인하기 때문에 실제 객체 내용이 같더라도 그 내용의 메모리 주소가 달라서 다르게 판단될 수 있다.

 

따라서 React.memo를 사용한다면 props로 전달되는 객체의 동일성을 보장해주어야 하고 이 때 활용할 수 있는게 useMemo, useCallback 과 같은 메모이제이션 훅이다.

 

✔️새해가 밝았다.

다사다난했던 2022년이 지나갔다. 연말 회고를 적을까 하다가 그냥 개인적으로 정리했고, 새해 목표나 다짐도 그냥 간단하게 정리했다. 회고나 목표는 원래 좀 거창하게(?) 정리하는 편이었는데 이번 년도에는 그런 것 없이 딱 3개월 앞만 내다 보고 살려고 한다. 지난 한 해 동안 각종 목표와 계획을 세웠지만 유효했던 것들은 언제나 약간 좀... 생각만 하다가 갑자기(!) 저지른 것들이었다. 그냥 아..이거 좀 재밌어 보이는데..이거 좀 하고 싶은데... 라고 생각했던 것들이 조금 오래 지나면 갑자기 행동으로 튀어나올 때가 있다. 예를들면 퇴사라던가 개발 공부라던가 부트캠프라던가... 언제나 그랬듯 해야할것만 같아서 하기 보다는 하고 싶어서 행동할거다. 그런 환경을 잘 조성하는데 집중하는게 이런 저런 계획, 목표보다 훨씬 유효한 것 같다. 개발도 코딩도 즐겁다고 느꼈던 그 지점을 공략하면서 더 탁월해질 수 있도록 노력하겠다.

🐈Feedback

1. 어제 작성하려고 했는데 하루 미뤄짐. 좀 더 빨리 작성할 수 있도록 - 시간을 단축할 수 있도록 노력할 것.

🐈To Do

1. 과제 시작