일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 타입스크립트 props
- 내일배움캠프 프로젝트
- 리액트 팀 프로젝트
- 파이썬 slice
- 내일배움캠프
- React Hooks
- 타입스크립트 리액트
- JavaScript
- useState
- 파이썬 list
- 파이썬 for in
- 리액트
- 리액트 프로젝트
- 파이썬 반복문
- 파이썬 enumerate
- 내일배움캠프 최종 프로젝트
- js
- 한글 공부 사이트
- typeScript
- 프로그래머스
- 타입스크립트
- 내배캠 프로젝트
- 파이썬 replace
- REACT
- tanstack query
- 파이썬 for
- 코딩테스트
- 리액트 훅
- 자바스크립트
- Next 팀 프로젝트
- Today
- Total
목록분류 전체보기 (210)
aotoyae
💡리액트 라우터 돔을 활용해 보자 1. 페이지 컴포넌트 작성 ➡️ 다중 페이지(우리는 원래 단일 페이지) 2. Router.js 파일 생성, router 를 구성하는 설정 코드 작성 ex) redux 할 때도 설정 파일을 만들어서 연결했다. 3. App.jsx import 하고(2번) 적용 : 연결(주입) 4. 페이지 이동 테스트 먼저 터미널에 npm add react-router-dom ~ 1. 페이지 컴포넌트 작성 2. Router.js 파일 생성 & router 구성하는 설정 코드 작성 - BrowserRoutr, Route, Routes 셋을 import 해온다 - 각 페이지들도 import - Route 에 페이지 연결 path="/" 이 부분은 url 뒤 들어가는 부분, 이동할 주소! impo..
[React] Redux : useSelector, useDispatch, 중앙 데이터 관리💡 리덕스를 활용해 보자~ props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다. 중앙 데이터 관리소 store 를 만들어서 데이터를 한번에 가져올 수 있도aotoyae.tistory.com 위 글에서 action 객체에 type 만 넘겨주고 있는데만약 input 을 만들어서 숫자를 받고, 버튼 클릭시그 숫자만큼 증가하거나 감소하게 만들고 싶다면? 💡 action 객체에 payload 를 추가한다.action 객체는 action type 을 payload 만큼 처리하는 것이다.payload 가 3이면, 3만큼을 plus 먼저 counter.js 로 가서 새 함..
💡 리덕스를 활용해 보자~props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다.중앙 데이터 관리소 store 를 만들어서 데이터를 한 번에 가져올 수 있도록 연결해 주자. 👀 그런데 Context API 말고 Redux 를 쓰는 이유는?1. 성능 최적화Context API 는 Provider 하위 모든 컴포넌트를 리렌더링하게 할 수 있다.그래서 불필요한 업데이트를 막기 위한 복잡한 최적화 과정이 필요하지만Redux 는 상태 변경 시 관련 컴포넌트만 선택적으로 업데이트할 수 있어 성능 관리에 용이하다. 2. 상태 로직의 중앙화와 일관성Redux 는 앱의 상태를 하나의 저장소 store 에 저장하기 때문에 상태 고직이 중앙에서 관리되어더 일관성 있고 예층..
[React] 최적화 & 리렌더링 막기(2) : useCallback, 함수 캐싱[React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기 💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트aotoyae.tistory.com 🫐 useMemo : 값을 기억한다. 반환되는 값이 바뀌면 리렌더 할 거다. 아래와 같이 무거운 작업을 하는 컴포넌트가 있을 때리렌더링을 매번 해버리면 매번 로딩이 오래 걸린다.function App() { return ( 네비게이션 바 FOOTER );}function HeavyComponent() { co..
[React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트가 리렌더링되면 자식컴포넌트 모두 리렌더링 💡 최적화 Optimizaaotoyae.tistory.com 🫐 useCallback : 함수를 기억하자. 함수가 바뀌면 리렌더 할 거다. function App() { console.log("App 렌더링"); const [count, setCount] = useState(0); const plusBtnHandler = () => { setCount(count + 1); }; const minusBtnHandle..
💡 리렌더링이 발생하는 경우1. 컴포넌트에서 state 가 바뀌었을 때2. 컴포넌트가 내려받은 props 가 바뀌었을 때3. 부모 컴포넌트가 리렌더링되면 자식컴포넌트 모두 리렌더링 💡 최적화 Optimization리액트에서 리렌더링이 자주 일어나면 많은 비용이 발생한다.비용이 발생하는 것을 최대한 줄이는 것을 최적화라 한다. 💡 불필요한 렌더링을 막을 대표적인 최적화 방법!1. memo(React.memo) : 컴포넌트를 캐싱2. useCallback : 함수를 캐싱3. useMemo : 값을 캐싱 🫐 memo(React.memo) : 컴포넌트를 기억한다. 컴포넌트가 바뀌어야 리렌더 할거다.memo 란 ?리렌더링 발생 3번째 경우, 부모가 리렌더링 되면 자식이 리렌더링된다. 1번 컴포넌트 리렌..
💡 props 없이 데이터를 공유해보자 App.jsx ➡️ GranFa.jsx ➡️ Father.jsx ➡️ Child.jsx App.jsx import "./App.css"; import GrandFa from "./components/GrandFa"; function App() { return ; } export default App; FamilyContext.js createContext 를 만든다. import { createContext } from "react"; export const FamilyContext = createContext(null); GranFa.jsx 데이터를 내려줄(공유할) 그랜파 파일에 FamilyContext import import { FamilyContext } f..
💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅 state 와 비슷하게 저장한다는 느낌. state : 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화 (버튼이 눌리면 숫자가 올라가야할 때!) ref : 리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수 초기화 XXX import { useRef, useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); const countRef = useRef(0); const style = { border: "1px solid black", margin: "10px", padding: "10..