React Router React Router install 방법 npm i react-router-dom 치면된다. main.jsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( ); BrowserRouter 를 임포트 하여 App컴포넌트를 감싸준다. BrowserRouter 는 브라우저의 현재 주소를 저장하고 감지하는 역할을 한다. App.j..

React Context 란 컴포넌트간의 데이터를 전달하는 또 다른 방법 기존의 Props가 가지고 있던 단점을 해결할 수 있음 Props의 단점은 부모에서 자식으로만 데이터를 전달할 수 있었다 App → ChildA → ChildB 이런 식의 부모자식을 갖는 컴포넌트가 App 컴포넌트에서 바로 ChildB에게 Props를 전달할 수가 없고 ChilA를 거쳐서 Props를 전달해야 했다. 최상위 컴포넌트에 존재하는 함수들을 Context (데이터 보관소 {객체}) 보관해 놓으면 Props를 이용하지 않고 Context를 통해서 필요한 데이터를 직통으로 공급해 줄 수 있다. Context 사용하기 ※특별한 경우가 아니면 Context함수는 컴포넌트 외부에 선언한다. export const TodoConte..

useMemo란 "메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅 Memoization: 기억해두기, 메모해두기 라는 뜻 동일한 연산이 필요해질때 마다 재연산을 통해 결과값을 가져오는것이 아닌 처음 연산이 이루어 질때 메모리 어딘가에 저장해두고 다음에 연산이 필요할때 저장된 값을 가져다 쓰는것 이다. const { totalCount, doneCount, notDoneCount } = useMemo(() => { console.log("getAnalyzedData 호출"); const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = t..

useReducer란 컴포넌트 내부에 새로운 State를 생성하는 React Hook 모든 useState는 useReducer로 대체 가능 하다. useReducer는 useState와는 다르게 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다. Reducer 문법 import { useReducer } from "react"; //reducer: 변환기 const reducer = (state, action) => { console.log(state, action); if (action.type === "INCREASE") { return state + action.data; } if (action.type === "DECREASE") { return state - action.data; } }; c..

라이프 사이클이란 우리말로 생애 주기 라고 한다. 리액트에는 Mount, Update, UnMount 라는 3가지로 구분되는 라이프 사인클을 갖는다. Mount - 컴포넌트가 탄생하는 순간 - 화면에 처음 렌더링 되는 순간 Update - 컴포넌트가 다시 렌더링 되는 순간 - 리렌더링 될 때를 의미 UnMount - 컴포넌트가 화면에서 사라지는 순간 - 렌더링에서 제외 되는 순간을 의 LifeCycle은 useEffect를 사용하여 구현 할 수 있다. useEffect 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook 리액트의 사이드 이펙트란 컴포넌트의 동작에 따라 파생되는 여러 효과 동작 사이드 이펙트 컴포넌트 내부의 값 변경 → 콘솔이 변경된 값 출력 컴포넌트 마운트 → 콘솔에"M..

React Hooks란 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메소드들을 말한다. 과거에 리액트는 Class컴포넌트를 사용하여 개발을 하였다. Class 컴포넌트는 리액트의 모든기능을 사용할 수 있었는데 ex) State, Ref, etc.... Function 컴포넌트는 UI 렌더링만 할 수 있었다 문법이 복잡하여 Fuction 컴포넌트에서도 State, Ref 등을 사용할 수 있도록 개발을 한것이 Hooks기능을 개발하게 되었다. ※리액트 Hook들은 함수 컴포넌트 내부에서만 호출 가능하고 조건문, 반복문 내에서는 호출이 불가 하다. 나만의 Hook도 제작이 가능하다(Custom Hook) 컴포넌트 내부에서 호출했을 경우 import { useState } from "..