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을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 전달한다. 리액트는 우리가 넘긴 함수를 ..

useState() 함수형 컴포넌트에서 state를 관리하는 메서드이다. useState 훅은 React 패키지에서 임포트해야 하기 때문에 코드 상단에 아래 코드를 써서 임포트해주자. import { useState } from "react"; 기본적인 사용 형식은 아래와 같다. const ['staete 이름', 'state를 변경할 함수'] = useState('state 초기값') 만약 state의 이름이 count, state를 변경하는 함수가 setCount, state의 초기값이 0이라면 아래처럼 쓸 수 있다. const [count, setCount] = useState(0); 만약 위의 count라는 이름을 가진 state의 값을 1증가 시키고 싶다면 아래처럼 사용할 수 있다! setCou..

This this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 즉, this는 함수가 호출되는 방식에 따라 동적으로 결정된다! 자바스크립트에서 this는 크게 4가지로 사용될 수 있다. 일반 함수 내부 (전역 객체 바인딩) 메서드 내부 (메서드를 호출한 객체 바인딩) 생성자 함수 (생성자 함수가 생성할 인스턴스 바인딩) apply/call/bind 호출 (메서드에 첫 번째 인수로 전달하는 객체 바인딩) 일반 함수 내부 this 일반 함수 내부에서 호출한 this는 전역 객체에 바인딩된다. var a = 4 function duck(){ console.log(this.a); } duck(); //4 메서드 내부 this 메서드 안에서 this를 호출하면 this는 메서드..