<div id="readability-page-1" class="page"><div id="dkContent" role="main">

					

					
						<h2>강디너의 개발 일지</h2>
					

					 
 
	


	
		
		
		<div>React에서 useState는 state값이 변경 될 때마다 해당 컴포넌트가 다시 렌더링을 하는 특성이 있습니다.
그래서 동기적으로 실행되는 자바스크립트 코드에서 setState를 실행하고 해당 state를 가지고 무슨짓을 하려고 할 때 이슈가 되는 경우가 있습니다.

예를 들어보겠습니다.
<pre id="code_1682150664368" data-ke-language="javascript" data-ke-type="codeblock"><code>const [fruit, setFruit] = useState({
 banana: 0,
 apple: 0,
});

const [errors, setErrors] = useState({
 banana: false,
 apple: false,
})</code></pre>

여러가지 과일들이 있고, 과일이 있는지 여부를 체크할 것입니다.
가볍게 보면 banana와 apple이 0이라서 해당 조건문에 걸리고 setErrors를 하게됩니다.
그리고 checkError에 { banana: true, apple: true } 값이 나오는 것으로 예상되죠.
<pre id="code_1682152029191" data-ke-language="javascript" data-ke-type="codeblock"><code>const validate = () =&gt; {
	console.log('검증시작');
 const { apple, banana } = fruit;

 if (banana === 0) {
 setErrors(prev =&gt; ({ ...prev, banana: true }));
 }
 if (apple === 0) {
 setErrors(prev =&gt; ({ ...prev, apple: true }));
 }
 // errors에 아직 반영이 되어있지 않다.
 const checkError = Object.values(errors).filter(i =&gt; i).length;
 console.log('checkError : ', errors, checkError);
 if (checkError &gt; 0) {
 console.log('에러 확인');
 return;
 }
 
 // 검증을 통과하면 그대로 API 통신
 console.log('검증 통과');
}</code></pre>
하지만 콘솔은 아래와 같이 false false가 나옵니다. (리렌더링 전이고)

그리고 한번 더 클릭해야지 true값이 나오는 것을 볼 수 있습니다. (리렌더링 후라서)
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="359" data-origin-height="131"><img src="https://blog.kakaocdn.net/dn/nK5Ui/btsddHOYdOE/KgyRtxSTBXRZRtptLYDcp0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="359" data-origin-height="131"></figure>


이렇게 오류인 경우에도 검증이 통과되었다고 이후의 로직을 타게되면 예상하지 못한 문제가 발생 할 수 있습니다.

이런 경우 플래그 값을 하나 두고 검증 성공 여부를 알 수 있도록 하는 방법이 있습니다.
<pre id="code_1682846960988" data-ke-language="javascript" data-ke-type="codeblock"><code>const validate = () =&gt; {
 console.log('검증시작');
 const { apple, banana } = fruit;

 const data = {
 apple: apple === 0,
 banana: banana === 0,
 };
 console.log(data);
 
 // 사용자에게 디테일한 오류를 보여주기 위해서
 // setErrors를 통해 apple, banana가 오류라는 것을 알려줘야한다.
 setErrors(prev =&gt; ({ ...prev, data}));
 
 const checkError = Object.values(data).filter(i =&gt; i).length;
 console.log('checkError : ', errors, checkError);
 if (checkError &gt; 0) {
 console.log('에러 확인');
 setFinishValidate(false);
 return;
 }

 console.log('검증 통과');
 setFinishValidate(true);
 };

 useEffect(() =&gt; {
 if (finishValidate) {
 console.log('오류 검증 통과');
 // 검증을 통과했으니그대로 API 통신
 }
 }, [finishValidate]);</code></pre>
finishValidate라는 플래그를 주고, 성공할 경우에 값을 true로 변경합니다.
그 후 useEffect를 통해서 finishValidate가 true가 되었을 때 오류 검증 통과 후 로직을 적어줍니다.


<figure data-ke-mobilestyle="widthOrigin" data-origin-width="362" data-origin-height="91"><img src="https://blog.kakaocdn.net/dn/cS9ErI/btsddZBMXel/P2WtQUdbB5Vm5nlSPKDufk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="362" data-origin-height="91"></figure>


apple과 banana의 값을 변경 후 테스트하면
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="381" data-origin-height="120"><img src="https://blog.kakaocdn.net/dn/1fc9G/btsdeIl5izW/UBAUl6H9dg2AEnqfMP9eh1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="381" data-origin-height="120"></figure>


주석에도 적었지만,
사용자에게 디테일한 오류를 보여주기 위해서는 setErrors를 통해서 apple, banana 값을 같이 변경해줘야합니다.
그 후 apple 오류에 대한 메시지를, banana 오류에 대한 메시지를 사용자에게 노출시킬 수 있습니다.</div>
	
		<img src="https://tistory1.daumcdn.net/tistory/2781910/skin/images/giveMe.png" alt="커피한잔...">
		
		

		
			
		

		


	

 
 

					

					

					

					

					

					
				</div></div>

강디너의 개발 일지

React에서 useState는 state값이 변경 될 때마다 해당 컴포넌트가 다시 렌더링을 하는 특성이 있습니다.
그래서 동기적으로 실행되는 자바스크립트 코드에서 setState를 실행하고 해당 state를 가지고 무슨짓을 하려고 할 때 이슈가 되는 경우가 있습니다.
 
예를 들어보겠습니다.
const [fruit, setFruit] = useState({
    banana: 0,
    apple: 0,
});
const [errors, setErrors] = useState({
    banana: false,
    apple: false,
})
 
여러가지 과일들이 있고, 과일이 있는지 여부를 체크할 것입니다.
가볍게 보면 banana와 apple이 0이라서 해당 조건문에 걸리고 setErrors를 하게됩니다.
그리고 checkError에 { banana: true, apple: true } 값이 나오는 것으로 예상되죠.
const validate = () => {
	console.log('검증시작');
    const { apple, banana } = fruit;
    if (banana === 0) {
        setErrors(prev => ({ ...prev, banana: true }));
    }
    if (apple === 0) {
        setErrors(prev => ({ ...prev, apple: true }));
    }
    // errors에 아직 반영이 되어있지 않다.
    const checkError = Object.values(errors).filter(i => i).length;
    console.log('checkError : ', errors, checkError);
    if (checkError > 0) {
      console.log('에러 확인');
      return;
    }
    
    // 검증을 통과하면 그대로 API 통신
    console.log('검증 통과');
}
하지만 콘솔은 아래와 같이 false false가 나옵니다. (리렌더링 전이고)
 
그리고 한번 더 클릭해야지 true값이 나오는 것을 볼 수 있습니다. (리렌더링 후라서)
 
이렇게 오류인 경우에도 검증이 통과되었다고 이후의 로직을 타게되면 예상하지 못한 문제가 발생 할 수 있습니다.
 
이런 경우 플래그 값을 하나 두고 검증 성공 여부를 알 수 있도록 하는 방법이 있습니다.
const validate = () => {
    console.log('검증시작');
    const { apple, banana } = fruit;
    const data = {
      apple: apple === 0,
      banana: banana === 0,
    };
    console.log(data);
    
    // 사용자에게 디테일한 오류를 보여주기 위해서
    // setErrors를 통해 apple, banana가 오류라는 것을 알려줘야한다.
    setErrors(prev => ({ ...prev, data}));
    
    const checkError = Object.values(data).filter(i => i).length;
    console.log('checkError : ', errors, checkError);
    if (checkError > 0) {
      console.log('에러 확인');
      setFinishValidate(false);
      return;
    }
    console.log('검증 통과');
    setFinishValidate(true);
  };
  useEffect(() => {
    if (finishValidate) {
      console.log('오류 검증 통과');
      // 검증을 통과했으니그대로 API 통신
    }
  }, [finishValidate]);
finishValidate라는 플래그를 주고, 성공할 경우에 값을 true로 변경합니다.
그 후 useEffect를 통해서 finishValidate가 true가 되었을 때 오류 검증 통과 후 로직을 적어줍니다.
 
 
 
apple과 banana의 값을 변경 후 테스트하면
 
주석에도 적었지만,
사용자에게 디테일한 오류를 보여주기 위해서는 setErrors를 통해서 apple, banana 값을 같이 변경해줘야합니다.
그 후 apple 오류에 대한 메시지를, banana 오류에 대한 메시지를 사용자에게 노출시킬 수 있습니다.

React setState를 동기적으로 사용해야할 때

댓글