Error
React-Query관련 Error
에러메세지는 이러하다.
React Hook "useQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.
=>
React Hook "useQuery"는 조건부로 호출됩니다. React Hooks는 모든 컴포넌트 렌더에서 정확히 같은 순서로 호출되어야 합니다.
당시 나의 코드는 useQuery를 조건문으로 나눠서 데이터를 받고싶었다.
const {isLoading,data}
= condition
?useQuery<Type>(id,fetchFun1)
:useQuery<Type>(id2,fetchFun2) 이유는 컴포넌트의 재사용성때문이다. 컴포넌트 하나에 Data만 바꿔서 넣어주고싶은데.
Props로 하면 새로고침시에 props를 받아오지 못하는데서 발생하는 Error때문에 에러페이지를 만나게 되는 경험을 느끼게하기 싫어서였다.
일단 조건문으로 useQuery를 쓰면 안되는것같다고 이해했다. => 사실 이게 아닐거같은 느낌이다. 이유도 모른채 조건문으로 분기는 안하고.
임시로 조건문을 fetch함수에만 달아서 분기해줬다 하지만 그에따른 TypeScript의 타입또한 분기해줘야하는데 이부분에서 막혔다..
아마 TypeScript를 쓰지않는다면. fetch함수를 분기하는걸로 원하는 로직을 실행시킬수 있을거라고 본다 => (실제로실행됨)
Event-Bubbling
이벤트버블링
뭔지는 알고있다 색종이를 포개고 맨위에 종이를눌러도 아래종이가 같이 눌리는 이펙트를 받는.
그런느낌으로 이해하고있었다 => 이게 맞긴하다
Modal -> Modal바깥(투명도를 줘서 어둡게 디자인했다)을클릭 -> Modal창 꺼짐위의 로직을 짜서 테스트하던 중.
이벤트버블링 때문에 모달창을 눌러도 모달창을 둘러싼 Wrap이 같이 눌리면서 Modal이 꺼지는 현상을 경험했다.
바로 이벤트버블링때문에 꼬이는걸 실제로 처음 접한 순간이다.
왜그런지 이유는 구글링을 안해도 알고있었기때문에. Modal창에 Click이벤트를 주는 함수에
Event.stopPropagation() 을 넣어줘서 바로 해결은 했다.
