TIL2

📌 Q1. React에서 불필요한 렌더링이 발생하는 상황에는 어떤 게 있을까?

1. 부모 컴포넌트가 리렌더링되면서 자식 컴포넌트도 전부 리렌더링

   • 부모가 리렌더링되면, props가 변경되지 않아도 자식이 같이 리렌더링 되는 경우가 많다고 한다.

2. props로 매번 새로운 참조값(객체, 배열, 힘수)을 전달할때 -> React.memo를 써도 의미가 없음

   <Child data={[1,2,3]} /> // 매번 새로운 배열 생성
   <Child onClick={() => doSomething()} /> // 매번 새로운 함수 생성

3. state를 불필요하게 크게 관리할 때

   • 하난의 state 객체에 필드가 많아지면, 특정 필드만 변경이 되도 전체가 다시 리렌더링된다.

4. context 과도 사용

   • Context Provider의 값이 조금만 바뀌어도 모든 Consumer 컴포넌트가 리렌더링된다.

5. 불필요한 key 사용 오류

• map을 돌릴 때 index를 key로 쓰면, 실제 값은 안 바뀌어도 key가 바뀌어서 전체가 리렌더링될 수 있다.

리액트에서 불필요한 리렌더링을 막기 위해서는 useMemo, React.memo, useCallback 같은 최적화 기법이나, state 구조 분리를 통해서 개선할 수 있다.

React.memo Vs useMemo의 차이는 무엇일까?

• React.memo는 컴포넌트를 감싸서, 부모가 리렌더링되더라도 props가 바뀌지 않으면 자식 컴포넌트의 리렌더링을 막아준다. 반면 useMemo는 값을 메오이제이션해서 불필요하게 동일한 연산을 반복하지 않는다.

메모이제이션 : 같은 입력이 다시 주어질 때 이전에 저장한 결과를 반환하여 중복 계산을 없애고 성능을 향상시키는 최적화 기법입니다

useCallback은 언제 쓰이고, useMemo와는 어떤 관계가 있을까?

useCallback은 자식 컴포넌트에 전달되는 함수를 메모이제이션해서 불필요한 리렌더링을 막아준다. 콜백을 props로 넘기면 새로운 함수가 생성돼 React.memo로도 막지 못하기 때문이다.

반면 useMemo는 값을 메모이제이션해서 불필요하게 동일한 연산을 반복하지 않는다. useCallback은 내부적으로 useMemo를 활용한 구현과 동일해 함수 버전의 useMemo라고 이해할 수 있다.

📌 Q2. React에서 state를 직접 수정하지 않고 setState를 사용해야 하는 이유는 무엇일까?

1. React가 변경을 감지하는 방식

   • React는 상태의 참조가 바뀌었는지를 기준으로 변경 여부를 판단한다.

2. 직접 수정의 문제점

   • 만약 state를 직접 수정하면 참조는 그대로이기 때문에 React가 변경을 감지하지 못해 컴포넌트가 리렌더링되지 않는다.

3. setState의 역할

   • setState는 React 내부의 업데이트 큐에 상태 변경을 등록하고, batching 처리를 통해 성능을 최적화 하면서 컴포넌트 리렌더링한다.
   • 또한 불변성을 지키는 방식으로 상태를 업데이트해야 React으 최적화도구 (React.memo)도 올바르게 동작한다.
   • batching : 여러 개의 상태 업데이트를 모아서 한번에 리렌더링하는 React의 최적화 방식이다. 예를 들어 setState를 여러분 호출해도, 각각의 호출에 리레던링하지 않고 마지막에 한번만 렌더링한다.

📌 Q3. 자바스크립트는 싱글 스레드 언어인데 어떻게 비동기 처리가 가능할까?

브라우저나 Node.js 런타임이 비동기 작업을 대신 처리하고 완료된 콜백을 태스크 큐에 넣어준다.

싱글스레드 : 한번에 하나의 작업을 처리하는 방식

이벤트 루프(Event Loop)와 태스크 큐(MacroTask, MicroTask)의 차이

이벤트 루프는 콜스택이 비어있을때 태스크 큐에 있는 작업을 가져와 실행해 비동기 처리를 가능하게 한다. 태스크 큐는 매크로 태스크(setTimeout, setInterval 등)와 마이크로 태스크(Promise.then 등)로 나뉘는데, 이벤트 루프가 매크로 태스크 실행 후 반드시 모든 마이크로 태스를 먼저 처리하는 규칙을 가진다.