React 2주차 Quiz

1. Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다. 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요? (메모장, 사진 등)

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

   1. React.memo
   2. useCallback

   3. useMemo

      1. React.memo
   • 특징: React.memo는 함수형 컴포넌트의 렌더링을 최적화하는 방법 중 하나이다. 이전에 렌더링한 결과를 메모이제이션(Memoization)하여, 같은 props가 전달될 경우 렌더링을 다시 하지 않고 이전에 렌더링한 결과를 재사용한다.

   • 차별점: React.memo는 props가 변경되지 않으면 렌더링을 다시 하지 않으므로, 렌더링이 자주 발생하는 컴포넌트의 경우 사용하면 성능 향상에 큰 도움이 된다.

     1. useCallback
   • 특징: useCallback은 함수형 컴포넌트 내부에서 생성된 함수를 메모이제이션하여, 같은 함수가 중복 생성되지 않도록 한다. 이전에 생성한 함수를 재사용함으로써, 불필요한 렌더링을 방지하고 성능을 최적화할 수 있다.

   • 차별점: useCallback은 같은 함수가 중복 생성되는 것을 방지하므로, 자주 변경되지 않는 함수나 자식 컴포넌트에 props로 전달되는 함수에 사용하면 성능 향상에 큰 도움이 된다.

     1. useMemo
   • 특징: useMemo는 계산 비용이 높은(Paint) 함수나 연산 결과를 메모이제이션하여, 같은 계산이 중복되지 않도록 한다. 이전에 계산한 결과를 재사용함으로써, 불필요한 계산을 방지하고 성능을 최적화할 수 있습니다.
   • 차별점: useMemo는 계산 비용이 높은 함수나 연산 결과를 메모이제이션하여 사용하므로, 매번 렌더링될 때마다 계산이 수행되는 것을 방지하고 성능을 향상시킬 수 있다. 따라서, 특히 계산이 복잡한 컴포넌트에서 사용하면 성능 향상에 큰 도움이 된다.

3. Q3. <form>을 사용할 때,

요소에는 사용자가 입력을 서버로 전송할 때 사용되는 데이터가 포함되는데, 기본적으로 **요소에서 submit 이벤트가 발생**하면 브라우저는 요소 안의 입력 요소의 값을 서버로 전송한다. **이때 브라우저는 새로운 페이지를 로드**하게 되므로 리덕스 스토어의 상태도 함께 초기화 된다. 즉, 제출(submit) 이벤트가 발생하면, 페이지가 다시 로드 되기 때문이다. 4. Q4. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요? 1.