모카 스터디/React 썸네일형 리스트형 리액트 라우터 핵심 개념 정리 React Router Outlet 자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링 될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면서 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다. 라우팅 설정 예시 (App.js): import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( ); } export default App; Ho.. 더보기 리액트 성능 최적화 Hook 개념정리 성능 최적화 useMemo 컴포넌트의 렌더링이 발생할 때마다 값을 계산하는 대신, 이전에 계산된 값을 재사용한다. 이로써 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다. import React, { useState, useMemo } from 'react'; function ExpensiveCalculation({ value }) { // useMemo를 사용하여 계산 결과를 메모이제이션 const result = useMemo(() => { console.log('Calculating...'); return value * 2; }, [value]); // value 값이 변경될 때만 재계산 return Result: {result}; } function App() { const [inputValu.. 더보기 리액트 데이터 패칭 라이브러리 개념 정리 및 비교 (React Query,SWR,Redux-sagas,thunk) React Query (데이터 패칭) 데이터 페칭과 관련된 상태 관리와 로직을 효과적으로 처리하기 위한 라이브러리이다. 리덕스나 mobx와 같이 상태관리보다는 비동기 데이터 처리에 관해 주요 기능을 한다. API 호출, 캐싱, 리프레싱 등을 간단한 API를 통해 처리할 수 있으며, 컴포넌트의 데이터 요구사항을 관리하는 데 도움을 준다. import React from 'react'; import { useQuery } from 'react-query'; function UserProfile() { // useQuery 훅을 사용하여 데이터 페칭 처리 const { data, isLoading, error } = useQuery('userData', fetchUserData); if (isLoading) .. 더보기 리액트 상태관리 라이브러리 및 Hook 개념 정리 및 비교 (React Context API, useReducer, Redux) 해당 포스팅은 이전에 들은 강의를 토대로 핵심을 정리. React Context API (리액트 내장 API) 컴포넌트 트리 전체를 대상으로 데이터를 공급하는 기능 provider 사용 일반적으로 props을 통해 컴포넌트 간에 데이터를 전달하지만, 컴포넌트 간에 깊은 중첩이 있는 경우 데이터를 전달하기 번거로워 진다. 이때 useContext를 사용하면 중첩된 컴포넌트 간에 데이터를 쉽게 공유할 수 있다. import React, { createContext, useContext } from 'react'; // 컨텍스트 생성 const UserContext = createContext(); export function UserProvider({ children }) { const user = { us.. 더보기 리액트 기본 Hook 개념정리 usestate 상태를 관리할 수 있게 도와주는 기능 import React, { useState } from 'react'; function Counter() { // useState 훅을 사용하여 count 상태와 그 상태를 업데이트하는 setCount 함수를 가져옵니다. const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment ); } export default Counter; useRef DOM 요소나 변수를 참조하고 관리하는 데 사용 import React, { useRef } from 'react'; function InputFocus() { // useRef 훅을 사용하여 input.. 더보기 리액트 기본 개념 정리 해당 포스팅은 이전에 들은 강의를 토대로 핵심을 정리. 조건부 렌더링 JSX 리스트와 키 li 엘리먼트를 사용할 때는 key속성을 추가 해줘야하 한다. 작은 컴포넌트로 나누기 단일 책임 원칙을 위해 한 컴포넌트는 한 가지 역활만 가지게 한다. 상태 끌어 올리기 동일한 데이터에 여러 컴포넌트가 의존하는 경우가 생기는데 이럴 경우에는 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다 SearchForm에서 관리했던 searchKeyword를 부모 컴포넌트인 App의 state로 끌어 올렸다(1). 이 값(searchKeyword)을 SearchForm의 props로 전달하고(3) 값을 갱신할 목적으로 onChange에 콜백 함수도 전달했다(4). 콜백함수는 handleChangeInput() 메.. 더보기 따라하며 배우는 리액트 A-Z -도커를 이용한 리액트 실행 - [John Ahn] 섹션 11 도커를 이용한 리액트 실행 챕터 설명 도커를 사용하는 이유 도커란 무엇인가 맥에서 도커 설치하기 도커를 사용할 때의 흐름 감잡기 도커 이미지로 도커 컨테이너 만들기 도커 이미지 생성하는 순서 도커 파일 만들기 도커 파일로 도커 이미지 만들기 리액트를 위한 도커 파일 작성하기 workdir: 컨테이너 안의 어떤 경로에 (로컬의)파일들을 넣을것인지 첫번째 copy 두번쨰 copy ./(로컬 내 전체 디렉토리)를 ./(컨테이너 디렉토리 /usr/src/app)으로 카피 생성한 이미지로 어플리케이션 실행 시 접근이 안되는 이유(포트 맵핑) 3000(왼쪽) 로컬로 포트 접속을 요청하면 3000(오른쪽) 컨테이너 내부의 포트 3000으로 맵핑 EC2에서 도커 설치 및 실행 여기까지 도커를 설치하기 위한 .. 더보기 따라하며 배우는 리액트 A-Z -리덕스 - [John Ahn] 섹션 10 리덕스 리덕스란? 미들웨어 없이 리덕스 카운터 앱 만들기 combineReducers Redux Provider npm i react-redux --save useSelector & useDispatch 리덕스 미들웨어 Redux Thunk Redux Toolkit Redux Toolkit APIs Disney 앱에 Redux적용하기 Redux-Persist 리덕스 익스 텐션 추가하기 더보기 이전 1 2 3 4 5 다음
