기초반 다시 수강중......💀
그래서 이전에 썼던 내용도 다시 쓰는 중...💀
🎉EventListener
EventListener의 인자
1. 어떤 행동을 할 때
2. 어떤 이벤트를 할지
이벤트 리스너를 사용하려면 마운트가 끝나 DOM요소가 완성되어 있어야 함 => 클래스형 컴포넌트의 경우 componentDidMount에 작성.
이벤트 내용을 작성하기 전 이벤트 대상과 ref가 같은지 확인할 것! (사진의 console.log(this.circle)을 console.log(this.circle.current)로 작성하면 동일했음!...😅)
개발자 도구에서도 이벤트 리스너가 제대로 추가되었는지 확인할 수 있다. 표시된 위치에서 경로를 볼 수 있음.
등록된 이벤트 리스너는 반드시 언마운트 단계에서 제거해 주기!
useEffect()
라이프사이클의 DidMount, DidUpdate, WillUnmount를 모두 합쳐놓은 것과 같은 동작을 한다.
useEffect()는 컴포넌트가 처음 렌더링 되는 순간 1회는 무조건 함수가 실행된다. 그 뒤부터는 의존성 배열에 주어진 요소가 변경되는 경우에만 함수를 실행한다(DidUpdate). 의존성 배열이 비어있을 경우 다시 실행되지 않는다. return단계(Unmount)에선 클래스형 컴포넌트에서도 그랬듯 이벤트를 해제하는 clean-up 작업을 해주어야 한다.
UseEffect 완벽 가이드
https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko
여기에 모든 게 다 있는 듯
Routing
yarn add react-router-dom@5.3.0
최신 버전은 문법이 다름!
추가 후 index.js에서 꼭 import하고 <react.~~>를 <BrowserRouter> 로 변경해주기
동적 라우팅
/:parameter 양식으로 작성.
/cat/river / /cat/perl 등 파라미터를 마음대로 변경하여 접속해도 동일한 고양이 페이지가 뜬다.
useParam
파라미터를 쓰기만 하는 건 의미가 없으니 useParam() 훅을 사용해 파라미터명을 받아올 수 있게 한다.
자식 컴포넌트를 이용하는 방법.
props에 파라미터가 함께 담겨 넘어간 것을 확인할 수 있다.
페이지 이동시키는 방법
매번 url을 직접 변경하며 돌아다닐 순 없기 때문에 이를 ui로 도와주어야 함!
-
<Link/>사용하기
Link import 까먹지 않기! -
History 사용하기
props를 찍어보면 다양한 history 내장함수들이 있음을 알 수 있다. 이것들을 이용하면 편하게 페이지를 이동 시킬 수 있음.
텍스트가 담긴 div를 클릭하면/home으로 이동하도록 만들어주었다.
push : 페이지를 이동하도록 해주는 메서드!
다시 처음 라우팅했던 방식대로 돌린 후 강아지페이지의 text를 클릭하면 에러가 발생한다. props로 넘겨준 것이 없기 때문!
useHistory
props로 받아오지 않을 경우엔 useHistory() 훅을 사용해 history를 직접 가져올 수 있다. 이렇게 코드를 변경하면 에러 없이 정상적으로 페이지가 이동되는 것을 확인할 수 있다.
Switch
- NotFound 페이지 만들어보기
따로 경로 지정을 하지 않았을 경우 /zzupzzup 등 지정되지 않은 경로로 이동 시엔 원하는대로 잘 보이지만, 평소에도 다른 경로에서 함께 출력되어버리는 문제가 있다.
이럴 때 <Switch> 태그로 감싸주면 평소엔 출력되지 않는 모습을 확인할 수 있다. 아까처럼 지정되지 않은 경로로 이동했을 경우에도 정상적으로 notfound 페이지가 뜬다!
Route만을 사용했을 경우 일치하는 경로에 있는 모든 컴포넌트를 전부 라우팅하지만("/"에 exact 적용하지 않을 경우 모든 페이지에서 뜨는 것 처럼), Switch는 맞는 경로를 발견하면 더이상 그 아래의 Route를 확인하지 않는다.
