항해99 12기 - 230216TIL

오늘 배운 것

Q. 리액트 개발 시, 렌더링 최적화 방법에 이용할 수 있는 다음 세 가지의 특징과 차별점을 각각 말씀해주세요.

1. React.memo

• 컴포넌트 리렌더링 방지
• 부모 컴포넌트의 state 변경으로 props가 바뀌지 않는 한, 이 컴포넌트는 리렌더링 되지 않는다.
• React.memo()안에 컴포넌트(여기서는 함수)를 인자로 넣는다.

2. useCallback

• 인자로 들어오는 함수 자체를 기억해 함수를 재사용
• 첫번째 인자에 함수를 두번째 인자에 배열을 넣어서, 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경 될 때까지 저장해 놓고 재사용

3. useMemo

• 연산한 값 재사용
• 동일한 값을 반환하는 함수를 계속 호출 할 때 필요없는 렌더링이 발생되는데, 맨 처음 해당 값을 반환할때 메모리에 저장해놓고 함수를 호출하는게 아니라, 저장한 값을 꺼내와서 쓴다. (캐싱)

Q. <form>을 사용할 때, <button type="submit">을 함께 사용하면 리덕스 데이터가 초기화 되는데, 왜 초기화 되는 지 생각해봅시다.

• <form> 태그는 입력 양식 전체를 감싸는 태그이다. 그 안의 <button>이 클릭되면 기본적으로 form을 전송하는 submit 이벤트가 발생된다.
• submit 이벤트가 발생할 경우 데이터를 submit하기 위해 페이지가 리로딩된다.
• 리로딩이 진행될때 새로고침이 되어 리덕스 store의 state값이 초기화가 된다.

Q. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?

• redux-persist 패키지를 설치한다.

Q. 리액트가 왜 Virtual DOM을 통해 컴포넌트를 그리는 것일까요? Virtual DOM을 사용할 때 왜 더 효율적인지에 대해 설명해주세요.

• DOM은 오타 수정, 이미지 첨부 등의 사소한 일을 해도 처음부터 다시 HTML을 파싱해 DOM트리를 만들고 CSS를 파싱하여 Render 트리를 만들고 레이아웃을 입혀 출력한다. 겨우 오타 하나를 잡기 위해 전체 사이트를 다시 처음부터 렌더링을 하기때문에 상당히 비효율적이다.
• Virtual DOM은 수정사항이 여러 가지 있더라도, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 딱 한 번만 렌더링을 일으킨다. DOM에 직접 접근해도 문제가 되진 않지만, 직접 접근하면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부화가 올 수 있다. 따라서 Virtual DOM을 사용해 한 번 전달 하고 한 번 렌더링 되는게 더 효율적이다.

Q. 비동기 프로그래밍이란 무엇인가요? 또한 콜백지옥이 발생할 때의 문제점은 무엇이며 이를 극복하기 위해 대안으로 나온 방법 2가지를 설명해주세요.

• 비동기 프로그래밍은 동기적인 프로그래밍의 반대되는 프로그래밍 방식이다. 동기적 방식은 코드가 순차적으로 실행되는 방식을 말하는데, 비동기적 방식은 실행 중인 코드의 완료 여부와 무관하기 즉시 다음 코드로 넘어가는 방식이다.
• 콜백지옥이 발생되면 코드의 가독성이 안좋아지고, 유지보수가 어려워진다.
• 이를 해결하기 위해 ES6에서 Promise객체가 소개되었다.
• Promise는 자바스크립트 내장객체이며, 콜백함수 대신 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다. 하지만 Promise를 사용해도 여전히 코드가 복잡했고, Promise를 더 편하게 사용하기위해 async, await이 도입되었다.