[front-end] 찜 목록 페이지 - 이벤트 버블링, Hooks

변경 사항

1. 찜 목록 페이지 하트 누르면 좋아요 취소 모달창 띄우기

2. 찜한 집 카드 누르면 집 상세페이지로 이동

3. 헤더에서 내 프로필 누르면 my page 관련 메뉴 drowdown

 

 

 

하트 색깔이 뭔가 너무 촌스러워보여서 고민했는데 일단 저대로 두고 나중에 바꾸던지 해야겠다.

지금 보니 헤더 찜 목록 이름도 찜한 방 -> 찜한 집으로 바꾸는게 더 나을 것 같다.

 

찜한 집 페이지에서는 유저가 좋아요를 눌렀던 집 정보가 카드 리스트가 나오는데, 카드의 하트를 눌러 좋아요를 취소 모달을 띄울 때 이벤트 버블링이 일어나서 하트를 감싸고 있는 카드에 걸린 onClick 콜백함수도 함께 실행되었다. 이런 경우 자식 요소의 이벤트가 전이되지 않도록 이벤트의 stopPropagation 함수를 쓰면된다.

 

const handleIcon = (e) => {
  e.stopPropagation(); //이벤트 전이 막기
  showModal(); //모달 보여주기
}

 

presentational 컴포넌트를 class로 작성하지 않도록 하려고하는데 생각보다 은근히 state와 라이프사이클 메서드를 쓸 경우가 많아져서 

어쩔 수 없이 함수형에서 클래스 형태로 바꾸는 경우가 많아졌다. 코드 작성하면서 이것저것 참고하려고 한국 react 사이트에 자주 들어가서 보는데, 중간 중간 예제로 hook을 사용해서 작성할 수 있는 코드를 보니 훨씬 간단하고 편리해보였다. 무엇보다도 hook을 사용하면 '아..class형으로 작성하면안되는데...'하면서 생겨났던 죄책감을 벗어날 수 있어서 가장 좋아보였다. 크크크

 

아직 backend쪽 코드가 있는게 아니기도하고 지금까지 만들어 놓은 코드들이 그렇게 복잡하지 않아서 hook을 쓰길 권장하는 wrapper-hell이나 기타 등등 문제들을 마주쳐보진 못했지만 다음 작성 컴포넌트 부터는 hook을 이용해서 작성해볼까 한다. 특히나 공식 사이트에 설명이 너무 잘돼있어서 진짜 좋다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

여태 작성한 코드들과 Hook은 문제없이 나란히 잘 작동하므로 이 다음 컴포넌트 부터는 리액트의 Hook을 사용해서 컴포넌트를 작성할 계획이다. 

 

Hook 사용시 주의해야할점

- 최상위(at the Top Level)에서만 Hook을 호출해야한다. -> 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안된다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 이러한 점은 useState와 useEffect가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해준다.

- 오직 React 함수 내에서 Hook을 호출해야한다. 대신, React 함수 컴포넌트에서 Hook을 호출하거나, Custom Hook에서 Hook을 호출할 수 있다.

 

이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.