FE - Tools/React10 [React] Context API와 useReducer 사용법 알아보기 Context API와 useReducer로 상태관리하기 # Redux 대신 Context API 로그인 기능을 구현하고 나면, 사용자의 정보를 변수에 담아 전역적으로 사용해야 한다. 그래서 Redux를 사용할까 하다가... 이 프로젝트는 전역적으로 관리해야할 정보가 사용자 정보 딱 하나밖에 없는데 Redux까지 사용할 필요가 있을까? 라는 생각이 들었다. 그래서 Redux 대신, React에서 제공하는 Context API를 사용해보기로 했다. 사용 방법은 간단하다. Context를 생성할 컴포넌트를 하나 만들고, creactContext와 useContext를 사용해주면 된다. // AuthContext.tsx import { createContext, useContext, useEffect, use.. 2023. 5. 11. [React] 제어 컴포넌트와 비제어 컴포넌트를 적절하게 사용하는 법 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트란, React에서 form 태그 엘리먼트를 다루는 방법이다. form 태그 엘리먼트는 자체적으로 데이터를 가진다는 특정이 있다. 이 특성 때문에 form 태그 엘리먼트를 다루는 방법이 두 가지로 나뉜다. form 태그 엘리먼트 중 가장 자주 사용되는 input 태그를 예로 들어 제어 컴포넌트와 비제어 컴포넌트를 설명해보려 한다. React에서는 input의 value 값을 다룰 때 state를 사용하거나 ref를 사용한다. state를 사용하는 것을 제어 컴포넌트, ref를 사용하는 것을 비제어 컴포넌트라고 한다. # 제어 컴포넌트 import React, { useState } from 'react'; export default funct.. 2023. 3. 12. [React] Express로 CORS 에러 해결하기 Express로 CORS 에러 해결하기 와 드디어... 해결... 프론트엔드에서 API를 이용하여 프로젝트를 만들다 보면 거의 반드시 CORS 에러를 마주하게 된다. 나는 서울시에서 제공하는 공공 API를 이용하여 프로젝트를 만들었는데 CORS 에러가 발생하였다. CORS 에러를 해결하는 방법을 구글에 검색하면 참 많은 방법이 나오는데, 그 중에서도 난 API만을 받아오는 작은 서버를 직접 만드는 방법을 선택하였다. CORS 에러는 원래 서버에서 해결해야 하는 에러이기 때문에 Node.js를 이용하여 해결하였다. 우선 유튜브 조코딩님의 https://youtu.be/Tt_tKhhhJqY 영상을 참고하였다. 기본적인 Node.js 내용을 이해할 수 있다. 이 내용을 바탕으로 API만을 위한 소소한 서버를 .. 2023. 3. 1. [React] React에서 네이버 지도 API 사용하기 React에서 네이버 지도 API 사용하기 1. public/index.html에 script 넣어주기 index.html의 안에 위와 같은 script를 넣어준다. ClientId= 뒤에 발급받은 Key를 넣어준다. 환경변수를 사용하고 싶다면 으로 적어주면 된다. 단, 개발자 도구에서 key 값이 다 보인다는 단점이 있다... 그래서 실제 서비스되는 웹 사이트에 적용하기엔 적절하지 않을 테니 참고해주시길! 😅 2. 지도 생성하기 // src/Map.js const mapRef = useRef(null); const lat = // 위도 숫자로 넣어주기 const lng = // 경도 숫자로 넣어주기 useEffect(() => { const { naver } = window; if (mapRef.cur.. 2023. 1. 19. [React] useParams 이용하기 useParams 이용하기 useParams는 react-router-dom에서 지원하는 함수로, URL의 매개변수의 키/값 쌍의 개체를 리턴한다. 동적 라우팅 방식으로 페이지 이동 시 URL 속의 값을 이용해야 할 때 유용하다. 예시로 사용법을 알아보자. App.js import React from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./Home"; import User from "./User"; function App() { return ( ); } export default App; 우선 App.js에서 routes를 작성해준다. User/:id라고 작성하면 User 페이지를 동적으로 라우팅할 수 .. 2022. 12. 22. [React] useEffect와 useLayoutEffect의 차이 useEffect와 useLayoutEffect의 차이 (+ DOM) # useEffect와 useLayoutEffect의 차이 : 실행 순서 React hooks 중 useEffect와 useLayoutEffect는 비슷한 역할을 하지만 실행 시점에 차이가 있다. 우선 이 둘의 차이를 설명하기 전에 DOM에 대해 먼저 짚고 넘어가자. 브라우저 렌더링 엔진은 HTML 문서를 DOM 트리로 만든다. 그리고 DOM 트리를 이용하여 화면의 레이아웃을 계산하고, 계산된 결과를 화면으로 보여준다. 이 작업을 렌더링이라고 한다. (브라우저 렌더링과 DOM 자세한 내용 : https://inthedev.tistory.com/16) # useEffect useEffect는 렌더링을 마치고 실행된다. 만약 useEffe.. 2022. 12. 20. 이전 1 2 다음
