yamoo9
commented
1 year ago 문제가 해결된 영상
아래 영상을 재생해보면 오류 발생 없이 요구된 사항이 정상적으로 처리되는 것을 볼 수 있을 겁니다. 😃
https://user-images.githubusercontent.com/1850554/231335832-b1043320-a185-47c7-a893-e42ae90f500c.mp4
문제 원인
React의 상태 변경이 즉시 일어나지 않는다는 점에 대한 이해가 필요해보입니다. 상태 변경에 대한 이전 질문의 답변 글을 살펴보면서 공부해보세요.
결과적으로 useEffect, useCallback을 사용해 문제를 해결할 수 있습니다. 아래 표시한 부분 코드를 살펴보세요.
가이드 파일
첨부한 src.zip 가이드 파일을 내려받아 압축 풀고 아래 파일 코드를 살펴보세요.
- SearchForm.tsx
- InputSelector.tsx
질문 작성자
김서현
문제 상황
<질문> UI는 딱 저렇게 위와같이 작동되도록 하고 싶습니다. selector를 처음 딱 클릭했을때에도 변함없이 "전체 카드"가 보여지며, 구를 정확히 선택하여 클릭했을때, 해당 구의 카드가 나오게하고, 다시 지역을 선택하세요를 클릭한다면, 다시 "전체 카드"가 나오게 말입니다!
UI로 보여지는 화면은 제가 원하는대로 되었으나, 계속 콘솔창에 에러가 찍힙니다.
+검색만 해도 에러가 납니다..ㅠㅠ(위에서 만든 searchSelectorOnly함수를 썼더니 납니다..)
<시도해본 상황> 여기서 조건문을 if(address !==null) 이런식으로 주어보면 콘솔창에 에러는 안나는듯하나, 제가 원하는 UI화면이 안됩니다.
맨처음 selector를 클릭만 했는대두 아래와 같이 카드가 아예 안보여지게 되고, 다시 지역선택하세요를 눌러도 카드가 전체로 안보여집니다.
프로젝트 저장소 URL
https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치
현재 파일 위치
src파일 : src.zip
로그인은 구글로그인 혹은 아이디 : babjo@naver.com / 비번: aaaa1111 입니다.
.env파일에 작성하시면 되는 코드를 아래에 적어드립니다.
.env파일 평소와 바꼈으니 주의바랍니다!!!!!!!!!
VITE_API_KEY = AIzaSyDBWIctC8FjPlqPiJllfsIX_HveGYDD1ao VITE_AUTH_DOMAIN = babjo-life.firebaseapp.com VITE_PROJECT_ID = babjo-life VITE_STORAGE_BUCKET = babjo-life.appspot.com VITE_MESSAGE_SENDER_ID = 1065462580105 VITE_APP_ID = 1:1065462580105:web:a78b340517d5f108ee5758 VITE_MEASUREMENT_ID = G-YFM830245Z VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D VITE_KAKAO_API_KEY=ebf9334d7db030f4f026a0d53f08a62a
환경 정보