setState 리렌더

리액트가 리렌더하는 방식

setState는 지난 포스팅에서 값이 변경이 되면 자동으로 리렌더링 해주는 기능이 포함되어 있다고 설명했었습니다. 이 때문에 setState는 비동기로 작동 합니다.

만약 setState가 동기로 작동하게 된다면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적으로 작동하게 됩니다.

따라서 변경 값을 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링 시킵니다.

💡 리렌더가 되는 상황
1. 새로운 props가 들어올 때
2. 부모 컴포넌트가 렌더링 될 때
3. 강제 업데이트(forceUpdate)가 실행될 때
4. state가 변경될 때

비동기적 특성

const [value,setValue]=useState(0)

const onClick = () => {
    setValue(value+1)
    setValue(value+1)
    setValue(value+1)
  }

위 와 같은 코드에서 value의 값은 0에서 어떻게 변할까요?
=> 정답은 1입니다. 이는 setState가 비동기적 특성을 갖기때문입니다.
(동기적으로 작동했다면 코드를 읽고 바로 내려가서 또 1을 더하고 또 1을 더해 3이 나왔을 것 입니다.)

state와 prev

const [value,setValue]=useState(0)

const onClick = () => {
    setValue((prev) => prev+1)
    setValue((prev) => prev+1)
    setValue((prev) => prev+1)
  }

이렇게 prev 매개변수(파라미터)를 사용하시게되면 임시 저장공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장공간에 있는 값이 없다면 기본 값을 불러오게 됩니다.

prev를 사용하시게되면 우리가 의도한대로 화면에 반영함과 동시에, 코드를 리팩토링하는데도 효율적입니다

함수에 들어가는 것은 인자(argu), 뭘로 받을지 기다리는 것은 매개변수(param) 입니다

매개변수 즉 파라미터의 이름은 아무렇게나 지어도 되지만, 관례를 따르며 사용하는 것이 좋습니다. ex) props..