프론트엔드 개발자가 되기위한 여정 -17-2

이정우·2022년 9월 22일
0

frontend-bootcamp

목록 보기
19/60

----17일차 2번째

밸!하!

밸로그 여러분 안녕하세요!!

오늘은 17일차의 두번째 블로그 입니당
오늘의 주제는
바로바로State의 prev입니다 !
음??
State는 들어봤는데 도대체 prev는 무엇이냐고요??

그럼 지금부터 본격적으로 State prev에 대해서 알아볼수있도록 하겠습니다~~~

먼저 prev에 대해서 이야기 하기 이전에
state에서 다뤘던 내용중 한개인
setState의 동작방식에 대해서 이야기를 드리겠습니다!

1. setState의 동작 방식

setState는 작동을 비동기로 하게됩니당 즉
한번에 여러개의 setState를 사용한다고 하더라도 모든변화가 된 이후에 다시 랜더링이 된다는거죠!

그렇기에 setState를 여러개를써서 여러번 변화를 시키려고 해도 실제로는 변화는 1번밖에 적용을 하지 않는다는 것입니다!
이해가 어려우시다고요??
그럼 간단하게 코드를 한개 보고 가실까요??
카운트를 10씩 증가를 시키고 싶어서 코드를 작성해봤습니다

import {useState} from "react"

const StatePrevPage=()=>{
	const [count,setCount]=useState(0);
    
    const onClickCount =()=>{
    	setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);
        setCount(count+1);// 총 10개
    };
    return (
    	<div>
        	<div>{count}</div>
            <button onClick={onClickCount}>카운트UP</button>
        </div>
    );
};

export default SatatePrevPage;

자 ! 이렇게 작성하면 어떤결과가 나올까요??

상태를 변화시키는 setState를 10번을 적었으니까
10,20,30,40,50
이렇게 증가할것같죠??
한번 실행해 볼까요??

출력값:1,2,3,4,5,6,7

어??? 이상하네요 ??
한번 클릭했을때 10이 증가해야하는데 1씩밖에 증가하고 있지가 않아요???

자! 아까 설명드렸던 내용입니다!
setState의 경우에는 모든 변경이 끝난이후에 다시 랜더링이 되기때문에 버튼을 누르면 초기값을 그대로 가지고 가게 되어있습니다!
그렇기 때문에 1씩밖에 증가하지 않게되는거지요!

자 이때 필요한것이 바로바로
State의 prev입니당!

2. State Prev

도대체 State Prev란 무엇일까요??
바로
임시 저장소를 만들어주는곳이라고 할수있습니다
setState가 모든 변경이 끝난이후 리렌더링 되는거라면 prev State는 임시저장소에 저장을해 이전값에서 누적을 해줄수 있게 되는것입니다!

자 말로만 들어서는 어렵다고요??

그럼 한번 직접 코드를 통해서 어떻게 작동하는지 봐볼까요??

import {useState} from "react"

const StatePrevPage=()=>{
	const [count,setCount]=useState(0);
    
    const onClickCount =()=>{
    	  	setCount((prev) => prev + 1);
          	setCount((prev) => prev + 1);
          	setCount((prev) => prev + 1);
            setCount((prev) => prev + 1);
  			setCount((prev) => prev + 1);
  			setCount((prev) => prev + 1);
  			setCount((prev) => prev + 1);
  			setCount((prev) => prev + 1);
            setCount((prev) => prev + 1);
            setCount((prev) => prev + 1);
// 총 10개
    };
    return (
    	<div>
        	<div>{count}</div>
            <button onClick={onClickCount}>카운트UP</button>
        </div>
    );
};

export default SatatePrevPage;

자 이렇게 되면 한번 클릭할때 처음의 prev에 0이담기고 1이 나오게되죠?
2번쨰 prev에는 1이담기고 2가나오게 되고 3번째는 2가 담기고 3이나오게되고 .....
최종적으로 10이 나오게 되는것입니다!!!

이렇게 예시를 보니 조금더 이해가 쉬우셨나요??

쉽게 말씀을 드리자면
prev를 쓰게 되면 임시저장소에 저장이 되서 여러분이 의도한 내용의 코딩을 할수있게됩니다!
참 쉽....나...?

하지만 처음에는 어렵지만 나중에는 금방 쓸수 있을거에요!

오늘은
setState와 prev에 대해서 이야기를 드렸습니다
setState는 많이 들어있더라도 최종적으로는 모든것이 변한후 1번렌더링이 되기 때문에 누적을해서 올리는것과같은 작업은 어렸다고 했죠?
하지만 prev를 이용하면 마치 스위치를 껏다가 켰다가 하는것과 같은 효과를 가질수 있다는거 잊지마세요!!

오늘의 포스팅은 여기까지입니다!

부족하지만 오늘도 지식 적립해가는 시간 되셨으면 좋겠네용!!

그럼
밸!바!

profile
주니어 프론트엔드 개발자

0개의 댓글