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와 리렌..

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

1. 이미지 .image { background-image: url(); background-position: center; background-size: cover; } 2. 정렬 .box { height: 100vh; display: flex; justify-content: center; align-items: center; } 3. 박스 width: 100px; height: 100px; border: 1px solid red; margin: 20px auto 20px auto;