11 스터디 퀴즈 [컴포넌트 성능 최적화]

[EYEG]

컴포넌트는

• 자신이 전달받은 ( _)가 변경될 때,
• 자신의 ( _)가 바뀔 때,
• ( _)가 리렌더링될 때,
• React 컴포넌트의 메서드 중 하나인 ( _) 함수가 실행될 때

리렌더링이 발생합니다.

[seokhj]

const todos = [{ id: 1, checked: true }, { id: 2, checked: true }];
const nextTodos = [...todos];

위 코드에서 nextTodos 같이 객체 안에 객체를 넣어야 할 경우, 불변성을 지키면서 새 값을 할당하기 복잡해지는데, 이 불편함을 해소시킬 수 있는 라이브러리는 무엇일까요?

정답

immer

` import produce from 'immer'; const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; ) `

[andrewylies]

Q. 리액트에서 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하게 해주는 API 이름은?

[ohr0226]

const onToggle = useCallback(id=>{
    setTodos(todos => todos.map(todo => todo.id === id ? {...todo,checked: !todo.checked} : todo)
},[])

useState 함수형 업데이트를 사용하면 () 안정성을 보장합니다. 또한 () 최적화할 수 있습니다.

정답

1. 이전 상태를 보존하여
2.이전 상태와 새로운 상태를 비교하여

[cheesepizza453]

전개 연산자(...문법)을 사용하면 [ ]복사를 하게 된다.

<FormTxt
                  id={'personName'}
                  label={'이름'}
                  maxLength={30}
                  isRequired={true}
                  placeholder={'이름을 입력해 주세요.'}
                  classProps={'font-light'}
                  onChange={(value) => {
                    setValue((prev) => {
                      return { ...prev, ...value };
                    });
                  }}
                />