20230330 프로젝트 데일리 로그

오늘 배운 것

- 리액트 setState 동기적 처리 방법

 -> 문제 상황: 회원 탈퇴 페이지에서 사용자가 이메일을 입력했을 때, userInfo에 있는 이메일과 일치하는지 확인하여 확인 문구를 바꿔주고 있었다. 또한, 이메일이 일치할 때만 회원탈퇴 기능이 작동하도록 코드를 짰다. 그런데 사용자가 input에 입력한 문자열을 상태로 관리했을 때, setState가 한박자씩 늦게 작동하여 일치 확인 문구가 제시간에 바뀌지 않았다. 

 

반박자 느린 setState...

반박자 느린 setState, 문자를 하나 더 입력해야 그제서야 원하는 대로 작동하는 버그 발생!

setState를 동기적으로 처리해주기 위해서, useEffect에 넣어주었다.

이렇게 코드를 변경하니, 의도한 대로 input이 나왔다. 

그래서 onKeyUp 이벤트 핸들러를 추가해서 이메일 일치 여부에 대한 상태를 변경해주었다.

이후, isCorrect가 true인 경우 로그아웃 로직이 돌아가도록 탈퇴 버튼 클릭 핸들러를 작성함!

 

- styled-components 조건부 스타일링

 -> 문제 상황: isCorrect가 false일 때는 빨간색으로, true일때는 파란색으로 글씨 색상 변경을 해주고 싶음.

 해결: className을 조건부로 주고, 그걸로 styled-components에서 color를 주면 된다!

 

피드백

 

앞으로 해결해야 할 것

- usersetting 페이지 상태관리 (userInfo 하나로 통일? or 상태 나누기?)