react-router-dom v5 아래 명령어를 통해 react-route-dom을 설치하고 여기를 들어가서 공식문서를 확인해보자. npm i react-router-dom@5.3.0 아래 순서를 따라서 라우팅을 처리하자. 1. index.js에 BroweserRouter 적용하기 BrowserRouter는 웹 브라우저가 가지고 있는 주소 정보를 props로 넘겨주는 역할을 한다. 현재 내가 어느 주소를 보고 있는 지 쉽게 알려준다. index.js import React from 'react'; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import './index.css'; import App..

이벤트 리스너? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는지 아닌지 지켜보다 알려주는 것이다. 대표적으로 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 쓰인다. 여기를 클릭해서 이벤트 리스너가 무엇이 있는지 확인해보자! 처럼 엘리먼트에 직접 이벤트를 넣어줄 수도 있지만, 컴포넌트가 Mount된 후에 addEventListener 를 통해서 추가할 수도 있다. 주의사항! React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다. addEventListener를..

React.useRef() 함수형 컴포넌트에서 돔 요소를 가져오는 방법이다. 클래스형 컴포넌트는 인스턴스를 생성 후 render 코드 블록 쪽만 리랜더링후 다시 실행한다. 하지만 함수형 컴포넌트는 함수 블록 안에 있는 모든 것을 리랜더링시 마다 다시 실행한다. 그래서 함수형 컴포넌트에 createRef를 사용 할 시, ref 값이 초기화 되어서 원하는 값을 얻지 못하기 떄문에, 리액트 훅인 useRef를 사용하는 것이다. useRef()는 쉽게 설명하면 도플갱어 박스이다. 어떤 값을 넣어주면 그 값으로 초기화된 변경 가능한 ref 객체를 반환해주기 때문! 그리고 이 값은 원본이 아니라 똑같이 생긴 다른 값이라 변경도 된다. 변경한다고 해도 리렌더링은 일어나지 않습니다. Ref 사용 이유! ref를 이용하..

useEffect() useEffect Hook은 클래스형 컴포넌트의 라이프 사이클 함수인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 볼 수 있다. 즉, useEffect는 컴포넌트가 Mount, Update, Unmount 된 후에 일을 처리한다. 컴포넌트의 라이프 사이클은 여기를 클릭하면 확인할 수 있다. 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 함수형 컴포넌트에서 위와 같은 경우에 직면할 경우 사용하는 것이 useEffect() 훅 이다. useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 전달한다. 리액트는 우리가 넘긴 함수를 ..