react (46) 썸네일형 리스트형 [리액트를 다루는 기술] 15장 Context API 15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기 - Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 로그인 정보, 애플리케이션 환경 설정, 테마 etc - 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용 할 수 있음 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 - 새 Context를 만들 때는 createContext 함수를 사용 - 파라미터에는 해당 Context의 기본 상태를 지정 Context/color.js import { createContext }.. [리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 14.1 비동기 작업의 이해 - 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리. 이 과정에서 해당 작업을 비동기적으로 처리 14.1.1 콜백 함수 ex) 파라미터 값이 주어지면 1초 뒤에 10을 더해서 반환하는 함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if(callback) { callback(result); } },1000) } increase(0, result => { console.log(result); }); - 1초에 걸쳐서 10,20,30,40과 같은 .. [리액트를 다루는 기술] 13장 리액트 라우터로 SPA 개발하기 13.1 라우팅이란? - 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 - 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 두가지 1) 리액트 라우터 (React Router) - 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있음 npm install react-router-dom 2) Next.js - 리액트 프로젝트의 프레임워크 - 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화 , 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공 - 라우팅 시스템은 파일 경로 기반으로 작동 13.2 싱글 페이지 애플리케이션이란? 멀티 페이지 애플리케이션 - 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS,JS,이.. [리액트를 다루는 기술] 12장 immer를 사용하여 더 쉽게 불변성 유지하기 12.1 immer를 설치하고 사용법 알아보기 - 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있음 - 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듬 - immer 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있음 - 컴포넌트의 상태 업데이트가 조금 까다로울 때 사용하면 좋음 npm install immer immer - npm (npmjs.com) immer Create your next immutable state by mutating the current one. Latest version: 10.0.3, last publis.. [리액트를 다루는 기술] 11장 컴포넌트 성능 최적화 11.1 많은 데이터 렌더링하기 - createBulkTodos 라는 함수를 만들어서 데이터 2,500개를 자동으로 생성 - useStaet(createBulkTodos)처럼 파라미터를 함수 형태로 넣어주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos 함수가 실행됨 App.js import {useState, useRef, useCallback} from 'react'; import TodoTemplate from "./Components/TodoTemplate"; import TodoInsert from "./Components/TodoInsert"; import TodoList from "./Components/TodoList"; function createBulkTodos() { co.. 인프런 - MERN 스택으로 만드는 지도 서비스 (+TypeScript) (2) 6. Frontend - 윈포윈도우 생성하기 - 현재 위치를 받고 이를 지도 위에 마커를 통해 표시하는 방법 ㅎㅎ 또날라감 - 인포윈도우 생성 InfoWindow | 네이버 지도 API v3 (navermaps.github.io) NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io InfoWindow/ index.tsx import { useEffect, useState } from "react"; import { Info } from "../../../types/info"; import "./infoWindow.css"; interface InfoWindowProps { .. 인프런 - MERN 스택으로 만드는 지도 서비스 (+TypeScript) (1) 1. 프로젝트 소개 - 네이버 맵 API를 통해 지도를 띄우는 기능 - 몽고 db에 저장된 위치 데이터로 마커와 인포 윈도우로 해당 데이터를 표시하는 기능 - 카카오 맵 API를 통해서 키워드 검색 결과를 조회하는 기능 - 저장을 누르면 해당 위치 데이터를 몽고 db에 저장하는 기능 - 중복된 데이터를 처리하는 방법 2. react - router 설정 AppRouter.tsx import { BrowserRouter,Routes, Route } from 'react-router-dom'; import Upload from './pages/Upload'; import Home from './pages/Home'; const AppRouter = () => { return ( ); }; export def.. [리액트를 다루는 기술] 10장 일정 관리 웹 애플리케이션 만들기 1. UI 구성하기 TodoTemplate -화면을 가운데에 정렬시켜 주며, 엡 타이틀(일정 관리)을 보여줌 - children으로 내부 JSX를 props로 받아와서 렌더링해 줌 TodoInsert - 새로운 항목을 입력하고 추가할 수 있는 컴포넌트 - state를 통해 인풋의 상태를 관리 TodoListItem - 각 할일 항목에 대한 정보를 보여 주는 컴포넌트 - todo 객체를 props로 받아와서 상태에 따라 다른 스타일의 UI를 보여줌 TodoList - todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러개의 TodoListItem 컴포넌트로 변환하여 보여 줌 2.1 TodoTemplate 만들기 TodoTemplate.js import React from.. 이전 1 2 3 4 5 6 다음
