질문 리스트 3 - doong-jo/web-development-basics GitHub Wiki

질문

콜백

자바스크립트에서 비동기성을 표현하는 기본 단위이다. 하지만 콜백으로 충분하지 않다.

• 사람의 두뇌는 순차적, 단일-스레드 방식으로 계획하는 데 익숙하지만 콜백은 비동기 흐름을 비선형적, 비순차적 방향으로 나타내므로 구현된 코드를 제대로 이해하기가 매우 어렵다. 따라서 이해하기 어려운 코드는 곧 버그를 품은 나쁜 코드로 이어진다.
• 제어를 다른 파트에 암시적으로 넘겨줘야 하므로 머리가 아프고 관리가 힘듦. 이렇게 제어권이 넘어가면서 더 자주 콜백을 호출하는 등 여러가지 신뢰성 문제에 문제가 된다.

Promise

프라미스는 콜백을 이용할 때 제어를 암시적으로 넘겨줬어야 했던 문제를 해결한다. 프라미스가 콜백을 완전히 없애는 것은 아니며 다만 기존 콜백 코드를 중계자 역할을 수행하는 유틸리티를 통해 잘 조정하여 서로 조화롭게 작동할 수 있도록 유도한 것이다. 덕분에 우리 두뇌가 비동기 코드를 좀 더 효율적으로 계획/관리 할 수 있다.

Promise.race

가장 먼저 완료된 프로미스의 결과값을 그대로 resolve하거나 reject한다.

Async, Await

암시적으로 Promise를 사용하여 결과를 반환한다. 비동기 코드를 동기적으로 표현하고자 할 때 사용한다.

Generator

ES6부터 도입된 새로운 유형의 함수로 일반 함수처럼 완전-실행하지 않고 실행 도중 (상태 정보를 그대로 간직한 채) 멈출 수도 있고 나중에 다시 시작할 수도 있다. 제너레이터는 이터레이터가 제어하는 코드로 비동기성을 옮겨놓은 것이다. 순차/동기/중단적 패턴을 유지함으로써 코드를 더 자연스럽게 이해하게 할 뿐 아니라 콜백의 단점 두가지를 해결한다.

React key

Key는 React가 어떤 항목을 변경 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정합니다. 가장 좋은 방법은 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 일반적으로 데이터의 ID를 key로 사용합니다.

key를 사용하면 재조정 작업 시 효율의 이득을 얻을 수 있습니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. 예를 들어, 위 비효율적인 예시에 key를 추가하여 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다.

인덱스를 key로 사용되면 항목의 순서가 바뀌었을 때 key 또한 바뀌게 되고 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.

Component 최적화

react profiler 기능중에 하이라이팅 기능을 켜서 리렌더링 체크를 하며 최적화를 진행하고 있습니다. 긴 리스트의 경우에는 windowing, react-virtualized 를 이용하여 그려지는 DOM 개수를 줄여 성능을 향상시킬 수 있습니다.

useMemo

렌더링 중에 의존성이 변경되었을 때만 값을 계산하려고 사용

하지만 일반적인 겨웅에선 의미있는 성능향상이 꼭 이루어지는 것은 아니니 useMemo를 사용하지 않고도 동작할 수 있또록 코드를 작성해서 성능을 최적화해라..