[DIL] useState(2)

setSomething(nextState)과 같은 set 함수

state를 다른 값으로 업데이트하고 리렌더링 하려면 useState가 반환하는 set함수를 사용하면 된다.

여기에는 다음 state를 직접 전달하거나, 이전 state로부터 계산하여 다음 state를 도출하는 함수를 전달할 수도 있다.

 

const [name, setName] = useState('Edward');

function handleClick() {
  setName('Taylor');
  setAge(a => a + 1);
  // ...

 

매개변수( Parameters )

state가 될 값으로 모든 데이터 타입이 허용되지만, 함수에 대해서는 특별한 동작이 있다.

함수를 nextState로 전달하면 업데이터 함수로 취급된다. 이 함수는 순수해야 하고, 대기 중인 state를 유일한 인수로 사용해야 하며, 다음 state를 반환해야 한다. React는 업데이터 함수를 대기열에 넣고 컴포넌트를 리렌더링 한다. 다음 렌더링 중에 React는 대기열에 있는 모든 업데이터를 이전 state에 적용하여 다음 state를 계산한다.

 

반환값( Returns )

set함수는 반환값이 없다.

 

 

**주의사항

• set 함수는 다음 렌더링에 대한 state 변수만 업데이트한다. set 함수를 호출한 후에도 state 변수에는 여전히 호출 전 화면에 있던 이전 값이 담겨있다.
• 사용자가 제공한 새로운 값이 Object.is()에 의해 현재 state와 동일하다고 판정되면, 최적화를 위해 React는 컴포넌트와 그 자식들을 리렌더링하지 않다. 경우에 따라 React가 자식을 건너뛰기 전에 컴포넌트를 호출해야 할 수도 있지만, 코드에 영향을 미치지는 않는다.

Object.is() :  두 값이 같은 값인지 결정하는 정적 메서드

console.log(Object.is('1', 1));
// Expected output: false

console.log(Object.is(NaN, NaN));
// Expected output: true

console.log(Object.is(-0, 0));
// Expected output: false

const obj = {};
console.log(Object.is(obj, {}));
// Expected output: false

 

• React는 state 업데이트를 일괄 처리한다. 모든 이벤트 핸들러가 실행되고 set 함수를 호출한 후에 화면을 업데이트한다. 이렇게 하면 단일 이벤트 중에 여러번 리렌더링 되는 것을 방지할 수 있다. 드물지만 DOM에 접근하기 위해 React가 화면을 더 일찍 업데이트하도록 강제해야 하는 경우, flushSync를 사용할 수 있다.
• 렌더링 도중 set 함수를 호출하는 것은 현재 렌더링 중인 컴포넌트 내에서만 허용된다. React는 해당 출력을 버리고 즉시 새로운 state로 다시 렌더링을 시도한다. 이 패턴은 거의 필요하지 않지만 이전 렌더링의 정보를 저장하는 데 사용할 수 있다.
• Strict Mode에서 React는 의도치 않은 불순물을 찾기 위해 업데이터 함수를 두 번 호출한다. 이는 매개변수와 동일하다.