[짜잘한 react] useState 쓰는 법, 함수형 쓰기

오늘의 주제
1. useState 안의 함수는 ()를 빼고 사용.
2. useState 안의 함수에서 기존값을 파라미터로 넣어 함수 사용 가능

1. 리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해주어야 합니다.

여기서 주의하셔야 하는 점은, 함수형태를 넣어주어야 하지, 함수를 다음과 같이 실행하시면 안됩니다.

🔻 올바른 예

onClick={onDecrease}

🔻 잘못된 예

onClick={onIncrease()}

2. useState 함수형으로 업데이트
업데이트 하고 싶은 새로운 값을 파라미터로 넣어주는 것 대신에 기존값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식으로 값을 업데이트 할 수 있음

• prevNumber => prevNumber

  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }