#06 리액트 숙련 : useState 함수형 업데이트

0. TIL 

▶ useState 함수로 사용 장점은 함수로 useState 사용시 props를 받을 필요가 없음

▶ setState만 있어도 매개변수(prev)로 데이터(comments)를 가져올 수 있음

---

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

▶ 함수형 업데이트: setNumber(()=>{})

 

▶ setNumber( (현재값(prev) =>{ return prev +1 })

     = setNumber(number +1) :

 

▶결과는 같지만 차이점이 있음!! (동일 코드 3번 실행했을ㄸㅐ)

(1) 기존 값  setNumber(number +1) 

- 배치성으로 업데이트 진행 (변경된 사항을 한번에 모아서 1번만 업데이트)

 setNumber(number +1) 

 setNumber(number +1) 

 setNumber(number +1) 

=> 한번만 실행됨

 

(2) 함수형 setNumber( (현재값(prev) => prev +1 )

 setNumber( (현재값(prev) => prev +1 )

 setNumber( (현재값(prev) => prev +1 )

 setNumber( (현재값(prev) => prev +1 )

=> 각각 실행됨

---

 

1. Home.jsx

function Home() {

    const [comments, setComments] = useState(data);

return (

 <WriteComments setComments={setComments}

)

 

2. WriteComments.jsx

function WriteComments({ setComments }) {

 

 setComments(function (prev) {

          return [...prev, newComment];

 });

 

 

끝.