일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 파이썬 enumerate
- 리액트 프로젝트
- 리액트 훅
- 파이썬 반복문
- 타입스크립트
- 코딩테스트
- 내일배움캠프 프로젝트
- 프로그래머스
- REACT
- 파이썬 slice
- 리액트 페이지 이동
- 리액트 팀 프로젝트
- 내배캠 프로젝트
- 자바스크립트
- 그리드 정렬
- 타입스크립트 리액트
- 한글 공부 사이트
- 내일배움캠프 최종 프로젝트
- useState
- js
- 파이썬 for in
- 파이썬 list
- Next 팀 프로젝트
- React Hooks
- JavaScript
- 내일배움캠프
- 파이썬 for
- 리액트
- typeScript
- Today
- Total
목록React (55)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/3m47b/btsDQ20MrEA/Vttf0MaktmCHo4nqyDHKPK/img.gif)
[React] 최적화 & 리렌더링 막기(2) : useCallback, 함수 캐싱 [React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기 💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트 aotoyae.tistory.com 🫐 useMemo : 값을 기억한다. 반환되는 값이 바뀌어야 리렌더 할거다. 아래와 같이 무거운 작업을 하는 컴포넌트가 있을 때 리렌더링을 매번 해버리면 항상 로딩이 오래 걸린다. function App() { return ( 네비게이션 바 FOOTER ); } function HeavyComponent() { const [count, setCount] = ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tyiW3/btsDQ6IQjGJ/O5ZSADCmm8TdzPwA8VgKYK/img.png)
[React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기 💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트가 리렌더링되면 자식컴포넌트 모두 리렌더링 💡 최적화 Optimiza aotoyae.tistory.com 이어서.. 🫐 useCallback : 함수를 기억하자. 함수가 바뀌어야 리렌더 할거다. function App() { console.log("App 렌더링"); const [count, setCount] = useState(0); const plusBtnHandler = () => { setCount(count + 1); }; const minusBtnHandler = ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bVGjsj/btsDWHAKI1r/bCR6bFrJnsGabV6XKhlfvk/img.png)
💡 리렌더링이 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트가 리렌더링되면 자식컴포넌트 모두 리렌더링 💡 최적화 Optimization 리액트에서 리렌더링이 자주 일어나면 많은 비용이 발생한다. 비용이 발생하는 것을 최대한 줄이는 것을 최적화라 한다. 💡 불필요한 렌더링을 막을 대표적인 최적화 방법! 1. memo(React.memo) : 컴포넌트를 캐싱 2. useCallback : 함수를 캐싱 3. useMemo : 값을 캐싱 🫐 memo(React.memo) : 컴포넌트를 기억한다. 컴포넌트가 바뀌어야 리렌더 할거다. memo 란 ? 리렌더링 발생 3번째 경우, 부모가 리렌더링 되면 자식이 리렌더링된다. 1번 컴포넌..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bC803G/btsDRbi0HDy/nHtLFtlfvdmcPBK42nggfk/img.png)
💡 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LgixL/btsDTwtq0K5/PkP2kJut3hIqHSHkC6nNNk/img.png)
💡 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/23L5t/btsDQ6hCTAg/FGuUN6KNYrT0vZwNNC5jxK/img.png)
💡 리액트 훅들에 알아보자 💡 useEffect : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅 - 컴포넌트가 화면에 보여졌을 때 - 컴포넌트가 화면에서 사라졌을 때(return) import "./App.css"; import { useEffect } from "react"; function App() { useEffect(() => { console.log("hello"); {/*콘솔에 hello 출력*/} }); return useEffect; } export default App; 화면이 렌더링될 때 콘솔에 값이 출력된다. import "./App.css"; import { useEffect, useState } from "react"; function App() { const [value, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sHLIq/btsDW8LrKLX/FQAYxpPTtYp7WXPvmMk4Rk/img.png)
💡 useState 의 기존 업데이트와 함수형 업데이트의 차이를 알아보자 💡 기존 업데이트 import "./App.css"; import { useState } from "react"; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > + ); } export default App; 기존 업데이트는 온클릭에 setNumber 를 세번 입력해도 숫자가 1 씩 오른다. ➡️ 마지막 setNumber 만 적용된다. (모아서 하나만 실행) 마지막 setNumber ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/czqGEJ/btsDQfZ8JH1/l9hcvfRNaDdkag7Ryie6K1/img.png)
💅 스타일드 컴포넌트를 사용해보자 먼저 styled components 플러그인을 설치하고, 터미널에 npm add styled-components 를 입력한다. 그럼 세팅 끝! import "./App.css"; import styled from "styled-components"; {/*style 를 임포트 해온다.*/} const StContainer = styled.div` {/*div 에 스타일 적용*/} display: flex; `; const StBodx = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; {/*props 를 받아올 수 있음*/} margin: 10px; `;..