08 스터디 퀴즈 [Hooks]

[EYEG]

1. useReducer를 사용하여 상태를 관리하는 경우, 초기 상태가 {count: 0}이고, 액션 타입으로 'increment'와 'decrement'를 처리하는 리듀서 함수를 작성하려고 한다. 'increment' 액션은 count를 1 증가시키고, 'decrement' 액션은 count를 1 감소시키는 기능을 한다. Reducer 함수의 기본 구조는 어떻게 될지 알아보기.

A.

function reducer(state, action) {
  return state;
}

B.

function reducer(state, action) {
  if (action.type === 'increment') {
    return {count: state.count + 1};
  } else if (action.type === 'decrement') {
    return {count: state.count - 1};
  } else {
    return state;
  }
}

C.

function reducer(state, action) {
  switch(action) {
    case 'increment':
      return state.count + 1;
    case 'decrement':
      return state.count - 1;
    default:
      return state;
  }
}

D.

function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      return state;
  }
}

[EYEG]

useState와 useReducer 비교

1.복잡한 상태 로직을 가진 컴포넌트와 다수의 하위 값이 있는 상태를 다룰 때는 ( ) 가 더 적합하다. 2.간단한 텍스트 입력 상태 관리에는 ( ) 가 더 적합하다. 3.여러 상태 값들이 서로 의존적일 때 ( ) 를 사용하는 것이 좋다. 4.상태 업데이트 로직을 컴포넌트 외부로 분리하고 싶지 않을 때 ( ) 를 사용해야 한다.

[ohr0226]

1. 코드를 실행했을 때 어떻게 되는지 설명해보세용
2. 언마운트 될때 실행하려면 코드를 어떻게 수정해야하는지 설명해보세용

import React, { useState, useEffect } from 'react';

const InfoState = () => {
  const [name,setName] = useState('')
  const [nickname,setNickname] = useState('')

// 여기가 문제 
  useEffect(()=>{
    console.log('실행됩니당')
  },[])
// 여기가 문제끝
  const onChangeName = e => {
    setName(e.target.value)
  }

  const onChangeNickname = e => {
    setNickname(e.target.value)
  }
  return ({...});
};

export default InfoState;

[ohr0226]

useMemo와 useCallback의 공통점은 리렌더링 시에 불필요한 연산을 방지하여 성능 향상시킬 수 있다. 그럼 차이점에 대해 알맞지 않은 것을 고르세용

1) useMemo는 값을 메모이제이션하고, useCallback은 함수를 메모이제이션한다. 2) useMemo의 반환값은 계산된 값을 반환하며, useCallback의 반환값은 생성한 콜백 함수를 반환한다. 3) useCallback은 주로 계산 비용이 높은 값들의 계산 결과를 기억하여 성능을 개선할 때 사용된다. 4) useCallback은 주로 자식 컴포넌트에 props로 전달되는 콜백 함수가 불필요한 리렌더링을 유발할 때 사용한다.

[ohr0226]

const 평균값구하기 = useMemo(() => 짱어려운평균값계산(리스트));

다음과 같은 식으로 평균값구하기를 실행하면 비효율적이다. 그 이유는?

[seokhj]

• 재사용된 값을 반환하는 Hooks
• 데이터의 많은 가공이 필요할 때 적합함
• 복잡한 수학적 계산이나, 계산하기 오래걸리는 로직을 짤 때 사용

1. 위 3가지의 조건을 충족하는 Hooks은 무엇일까요?
2. 그렇다면 그 훅의 장점 1가지만 말해보세요.

정답은?(펴보시면 아니되옵니다!!)

```html 1. useMemo (이미 연산된 값을 memo 해 둠) 2. 성능 최적화 ```

[cheesepizza453]

아래 console.log(name)에는 무엇이 찍힐까요?

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');
  // ...

function handleClick() {
  setName('Robin');
  console.log(name); 
}

[andrewylies]

useMemo와 useCallback 의 공통점과 차이점은?