오늘의 결론
- Event Listener (클래스형 컴포넌트, 함수형 컴포넌트)
- 라우팅 feat. SPA
- react-router-dom 패키지 : URL파라미터 (useParam 훅사용, 속성사용), link & history,
오늘 배운 것
Event Listener
클래스형
Event Listener는 componentDidmount에서 설정해줘야한다. DOM이 생겨야 이벤트를 설정해 줄 수 있으니까.
1. 이벤트를 설정할 객체를 생성자 쪽에 this.cicle=React.createRef(null) 식으로 만들어준다.
2. ref = {this.cicle}를 내가 이벤트를 걸고자 하는 태그에 걸어준다.
그리고 this.cicle를 render 밑에 찍어보면 null이나오고 componentDidmount 에 찍어보면 ref = {this.cicle}가 걸려잇는 값이 나온다. current: h1 이런식으로
3. 이제 이벤트를 구독할 태그는 확인이 됐으니 함수를 만들어보자. 생성자 바로 아래 만들었다
4. 아래 사진처럼 매개변수로 e를 받았는데 이벤트 객체란다. 콘솔로 e.target을 찍고 this.cicle.curret를 찍어보는 것은 이벤트 대상과 내가 지정해준 대상이 같은지 확인해보기 위해서다
5. 그리고 componentDidmount에가서 this.cicle.current.addEventListener("mouse over, this.hoverEvent) 로 이벤트를 걸어준다.
6. 페이지에 가서 mouseover했을시 콘솔이 뜨는지 확인해본다. 확인 후 콘솔이 잘 나온다면 이벤트에 내가 원하는 이벤트를 추가해준다.
7. 마지막으로 clean up 과정을해줘야한다. 내가 지정해 놓은 컴포넌트가 생겼다가 다시 사라졌다하면 이벤트가 계속 쌓여 나중에 1번 mouseover해도 100번 실행되는 결과과 나올 수 있단다.
componentWillUnmount에 removeEventListener 아래를 추가해주면 끝난다.
함수형
함수형도 클래스형 컴포넌트와 동작 원리는 동일하기 때문에 코드를 써보고 설명을 썼다.
const text = (props){
const text = React.useRef(null)
hoverEvent = (e) =>{
console.log(e.target)
console.log(text.current)
}
React.userEffect(() =>{
text.current.addEventListener("mouseover",hoverEvent)
return () => {
text.current.removeEventListener("mouseover", hoverEvent)
}
} ,[])
return {
<h1 ref={text}> 텍스트입니다 </h1>
} - 우선 함수형도 이벤트를 설정할 객체 text를 만들어주고 리액훅 React.useRef를 지정해준다. 클래스형 컴포넌트에서 React.creatRef와 똑다고 보면된다.
- 클래스형 컴포넌트에서 componentDidmount, componentWillupdate, componentWillunMount에서 하는 역할을 함수형 컴포넌트는에서는 React.userEffect에서한다. 때문에 이벤트 구독을 이 안에서해줘야된다.
- 클래스형 컴포넌트에서 clean up 부분은 componentWillunMount 에서 해주었듯이 함수형 컴포넌트는 return에서 해준다.
라우팅
SPA (Single page application)
1. 장점
사용성이 좋다. 페이지를 이동할 때마다 서버에서 주는 html을 이용하여 화면을 바꾸지 않기때문이다. 또한, 1개의 html을 이용하기 때문에 상태유지 (페이지가 가지고 있는 데이터) 가 좋다.
2. 단점
로딩이 느릴 수가 있다. MPA방식은 사용자가 구매든 회원가입이든 원하는 페이지에 들어가야 html을 뿌려주는데 SPA방식은 사용자가 뭘 할지 상관없이 모든 페이지를 주기때문이다.
react-router-dom ($ yarn add react-router-dom)
1. index.js (프로젝트의 시작점) 에서 import 후 BrowserRouter로 App/ 감싸기
2. 연결할 컴포넌트 생성
컴포넌트 생성 후 import React해주고. const 컴포넌트 생성해주고 export default까지 해주는거 잊지말고.
3. App.js에서 필요없는거 싹다 지우고 import
4. 이제 브라우저가서 확인해보면된다. 근데 cat화면에 메인 화면까지 나오는데
이것은 path에 exact를 걸어주면 해결가능
- URL 파라미터 사용하기 (쿼리는 나중에 자료 참고)
- useParam 훅사용하기 (자식컴포넌트사용)
6-1) 속성사용하여 param받기(props에 많은 정보를 받는다. match에 param정보가 있다.많은 데이터 필요할때 좋은거같다.)
- 페이지 이동하기 (link, history)
link는 a태그와 비슷하다고 보면된다.
history는 props의 push를 이용하려한다. (replace는 모르겠다.)
(props의 replace 데이터는 '속성을 이용'하여 param받기하여 받았다.)
속성을 이용하지않고 자식 컴포넌트를 이용해서 props에 history가 없는 경우는
useHistory 훅을 사용해주면 된다.
느낀 것
드디어 클래스형과 함수형이 눈에 익숙해 지는 것 같다. 어제까지만해도 너무 외계어 같아서 힘들었는데 다행이다.
그리고 말로만 듣던 SPA에 대해 자세히 알 수 있었다. MPA에 비해서 초기 로딩 속도가 느린 단점이 있지만 사용성이 좋은 상태유지나, 컴포넌트를 잘 모듈화하면 너무 좋아서 요즘 많이 쓰는것 같다. 그리고 react-router-dom패키지 설치하여 속성을 이용한 페이지 이동방법, 자식컴포넌트를 이용한 방법, useParams훅, UseHistory훅 등 여러 방법을 배워보았는데 한번씩 사용해보면서 잘 맞는 방법을 찾아봐야겠다.
내일 배울 것
react 주특기 강의 4~5주차 강의보기
