모임 질문

모임일시 : 2024-06-17

참여인원 : 5명, 오*택, 고*성, 장*희, 이*양, 이*훈

1. useState에 초깃값으로 exam( )이라는 함수를 줬을 때와 콜백의 리턴 값으로 줬을 때의 동작의 차이를 설명해 주세요.

useState 훅이 반환한 세터 함수는 리액트가 컴포넌트 내부의 상태 변화를 쉽게 감지할 수 있게 만든다. 컴포넌트는 그 UI를 반환하는 함수이므로, 상태가 변경이 되면 그에 따라 해당 컴포넌트를 다시 렌더링한다.

 

useState()에 인자를 넣으면, 그것이 초깃값으로 설정된다. 그런데, JS의 함수는 일급 객체이므로 값으로써 사용될 수 있으므로, useState()의 인자로 사용될 수 있다. 일반 값을 인자로 넣었을 때와 달리, 함수를 인자로 넣게 되면 그 함수의 연산이 진행되어야 한다. 이렇게 함수를 인자로 넣은 것을 '지연 계산 초기 상태(lazy initial state)'라고 부른다. 그런데 문제는 useState의 업데이터 함수가 실행이 되면서 상태값이 변경되면 리액트는 리렌더링이 발생한다는 데 있다. 이처럼 상태 초기값을 생성하기 위해 연산을 매번 진행하는 것은 낭비가 심한데, 이럴 때에는 지연 계산 초기 상태로 처리한다.

function untangle (aFrayedKnot) {
  // 값비싼 데이터 해석 절차를 수행
  return nugget;
}

function ShinyComponent ({tangledWeb}) {
  const [shiny, setShiny] = useSate(untangle(tangledWeb));
  
  // shiny 값을 사용하고 새로운 shiny 값을 설정하도록 허용함
}

// 지연 계산 초기 상태(lazy initial state)
function ShinyString ({tangledWeb}) {
  const [shiny, setShiny] = useState(() => untangle(tangledWeb));
  
  // shiny 값을 사용하고 새로운 shiny 값을 설정하도록 허용함
}

 

동시 업데이트를 방지하고 성능 최적화 ?? 

불필요한 상태 업데이트를 줄일 수 있다.

function add(){ setNumber(Number + 1); setNumber(Number + 1); setNumber(Number + 1); }