react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지이다. 패키지 설치 yarn add react-router-dom 구조 및 사용법 1. src 폴더에 pages 라는 폴더를 만들고 그 안 가상의 여러 페이지 생성 2. src/shared/Router.js 생성 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Contact from "...

useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook, 즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. 코드로 보기 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능 import React, { useEffect } from "react"; const App = () => { useEffect(() => { console.log("hello useEffect"); }); return Home; } export default App; useEffect와 리렌..

폴더구조 src/redux/config/configStore.js 생성 import {createStore} from "redux"; import {combineReducers} from "redux"; const rootReducer = combineReducers({ // modules }); const store = createStore(rootReducer); export default store; src/redux/modules/counter.js 생성 const initialState = { number: 0 } const counter = (state = initialState, action) => { switch(action.type) { // type에 맞는 로직 생성 default: r..

리액트 앱 생성 yarn create react-app [폴더명] 패키지 react-router-dom yarn add react-router-dom 리덕스, 리덕스툴킷 yarn add redux react-redux @reduxjs/toolkit Axios 설치 yarn add axios