useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능..

useState?? useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 아니!! 근데 이런 걸 왜 쓰는 겨?? state는 리액트에서 동적인 부분을 담당한다!! 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면.... 어라? 전부... 정적?? 에라이 ! 와장창!!! 할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다. import React, { useState } from 'react'; function Example() { //..

history history라는 기능이 Route에 많이 보이는데, 도당체 어떤 거냥?? history는 자바스크립트 다양한 환경에서 history 세션을 관리해준다. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md 깃허브 주소에서 보자면 history objects typically have the following properties and methods: length - (number) The number of entries in the history stack action - (string) The current action (PUSH, REPLACE, or POP) ..

Route를 들어가기 앞서 SPA를 다시 한번 알아보자 SPA? Single Page Application의 약자로, 말 그대로 페이지가 1개인 애플리케이션이란 뜻이다. 전통적인 웹 어플리케이션의 구조는 여러 페이지로 구성되어 있다. react-router는 써드파티 라이브러리로, 공식은 아니지만 가장 많이 사용되고 있는 라이브러리이다. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해 준다. react-router-dom 기본적으로 react-router-dom이 브라우저에서 사용되는 리액트 라우터이다. import React from 'react'; import {Route} from 'react-router-dom'; import { Home, About } from 'pages'..