State prev와 State lifting

State prev

state 를 사용할 때 prev 라는 임시 저장공간을 사용해서 앞선 state 값을 불러올 수 있다.

const [count, setCount] = useState(0);

  const onClickCount = () => {
    
    setCount((prev) => prev + 1);
    // 임시 저장공간 prev에서 이전 값을 가져온다. 기본값은 0 으로 prev + 1 = 1
    
    setCount((prev) => prev + 1);
    // 앞에 있는 prev 를 가져와서 1+1
    
    setCount((prev) => prev + 1);
    // 앞에 있는 임시 저장 prev 를 가져와서 2+1
   
    setCount((prev) => prev + 1);
    // 앞에 있는 임시 저장 prev 를 가져와서 3+1
    // onClickcount를 한 번 누를 때마다 값이 4씩 오르게 됨
  };

boolean 값을 주고 부정연산자 ! 와 함께 사용할 수도 있다.

const [isOpen, setIsOpen] = useState(false);

  const onToggleModal = () => {
    setIsOpen((prev) => !prev);
  };

State Lifting

자식 컴포넌트에 있던 state, setState 를 부모 컴포넌트로 옮겨줘서 여러 자식 컴포넌트들이 state를 props 해서 사용할 수 있게 하는 것을 말한다. 부모 컴포넌트에 state 할당 후 props 를 이용해 자식 컴포넌트로 넘겨주면 된다.

부모 컴포넌트에 할당된 state 를 자식 컴포넌트로 props 하는 방법은 두 가지가 있다.

• 실행 함수 전체를 넘기기
• setState 값 넘기기

export default function Parents() {
  const [count, setCount] = useState(0);

  // 방법1 : 실행 함수 전체 넘기기
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
     					// 방법2 : setCount 값 넘기기
      <Child1 count={count} setCount={setCount} />
      <div> =============================== </div>
      <Child2 count={count} onClickCountUp={onClickCountUp} />
    </div>
  );
}