분류 전체보기268 (15).이정환_react.js강의_감정일기장_프로젝트_2강_Link태그 ● 1_ Link 컴포넌트 태그 :○ 복습 : Rouutes 컴포넌트 + Route태그 : Route태그의 path={"경로"}, element 속성 = {컴포넌트}- App.jsimport {Routes , Route} from 'react-router-dom';function App(){ return ( }> )}○ Link 태그 사용 : to속성={"경로"}- App.jsimport {Routes , Route, Link} from 'react-router-dom';//import에 Link 컴포넌트 추가function App(){ return ( Home .. 2025. 1. 20. (14).이정환_react.js강의_감정일기장_프로젝트_1강_페이지라우팅(작성중) ● 1_ 이론_페이지 라우팅 :○ 정의 : React || Html 에서 경로에 따라 알맞은 페이지 렌더링 하는 과정좀 더 자세히 말하면, 사용자가 브라우저에 접속 시, 페이지 요청 버튼을 통해, 다른 페이지 이동 시,서버에서 반환된 페이지를 서버 => 브라우저 => 사용자 경로로 페이지 렌더링을 볼 수 있게되는 과정을 일컫는다.○ React와 일반적인 웹의 페이지 라우팅 차이- 일반적인 웹 페이지 라우팅 (MPA방식 + 서버 사이드 렌더링) :=> 사용자가 특정 페이지를 서버에게 요청할 때, 서버는 이미 모든 페이지를 갖고 있으므로, 순회하며, 사용자가 요청한 페이지를 찾아 브라우저에 렌더링한다. // 여기서 핵심은 서버가 모든 페이지를 갖고있다는 것=> 한계 : 사용자가 다른 페이지를 요청할 때, 기.. 2025. 1. 20. (14).이정환_react.js강의_감정일기장_프로젝트(작성중) 프로젝트를 통해 얻을 수 있는 React 기술들초기 셋팅 법 :①. 프로젝트 생성할 폴더 위치로 Vscode 접속 후, 터미널 창에 react 프로젝트 생성npm create vite@latest②. 명령어 후에 생성된 폴더로 vsCode 위치를 옮긴 뒤, 아래의 명령어를 통해, react 나머지 파일들 생성npm i③. [eslint.config.js] 파일 코드 내 ruls 수정import js from "@eslint/js";import globals from "globals";import react from "eslint-plugin-react";import reactHooks from "eslint-plugin-react-hooks";import reactRefresh from "eslint-p.. 2025. 1. 19. (13).이정환_react.js강의_Context분리로 최적화 문제 해결 ★useMemo 복습하기 :★ 분리법 + 구조파악●TododispatchContext(함수 보관용 Context) , TodoStateContext(useState 변수 보관용 Context)-순서1_ App 컴포넌트 밖에 Context 2개 초기화import {createContext} from 'react';const TodoStateContext = createContext();const TodoDisPatchContext = createContext();function App(){}-순서2_ DisPatch의 함수, 핸들러를 useMemo 등록하기import {createContext} from 'react';const TodoStateContext = createContext();const To.. 2025. 1. 18. 이전 1 2 3 4 5 6 7 8 ··· 67 다음
