일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Next 팀 프로젝트
- 파이썬 slice
- JavaScript
- 그리드 정렬
- 타입스크립트 props
- 파이썬 for
- 파이썬 for in
- useState
- js
- typeScript
- React Hooks
- 내일배움캠프 프로젝트
- 타입스크립트 리액트
- 리액트 페이지 이동
- 프로그래머스
- 코딩테스트
- 내배캠 프로젝트
- 내일배움캠프
- 한글 공부 사이트
- 리액트 훅
- 파이썬 list
- 자바스크립트
- 리액트 팀 프로젝트
- 리액트 프로젝트
- 내일배움캠프 최종 프로젝트
- REACT
- 리액트
- 타입스크립트
- 파이썬 반복문
- 파이썬 enumerate
- Today
- Total
목록React (55)
aotoyae
💡 값에 따라 컴포넌트 값을 바꿔보자! 원래는 삼항연산자를 많이 사용했었는데, answer 이 true 면 1번을 보여주고 false 면 2번을 보여줘! const answer = true; {answer ? 1번 : 2번} true 일 때만 표시할 방법이 있었다! answer 이 true 면 1번을 보여줘! const answer = true; {answer && 1번}
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/s4qcF/btsFaNAhhIZ/OTKKgcKEkcKDlqlDaIPWyk/img.png)
💡 alert 대신 react-toastify 를 이용해 알림창을 구현해 보자. npm install --save react-toastify or yarn add react-toastify App.jsx or Index.jsx 최상위 컴포넌트로 가서 ToastContainer 와 css 를 import 해온다. import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; function App() { return ( ); } export default App; Login.jsx 알림창을 사용할 컴포넌트로 가서 alert 대신 toast! import { toast } from "react-to..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bPeK4l/btsE951iQuj/xHosrnCNF4zT9VD8XylU60/img.gif)
💡 디바운싱을 쉽게 구현해 줄 라이브러리를 사용해보자. npm i --save lodash or yarn add lodash import { useState, useCallback } from "react"; import "./App.css"; import _ from "lodash"; function App() { const [searchText, setSearchText] = useState(""); const [inputText, setInputText] = useState(""); const handleSearchText = useCallback( _.debounce((text) => { setSearchText(text); }, 2000), // 2초뒤 실행 [] ); const handleCh..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZtRzy/btsE8Be63kc/KK3NMgKIiCii65HUhevJjk/img.png)
💡 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 ex) 좋아요를 엄청 많이 누를 때 ~ ✳️ Throttling : 주로 무한스크롤에 사용 게임 중 공격 버튼을 마구 누르는데 일정 시간 동안 한 발씩 발사될 때!! 쓰롤링이 실행 된 것이다. 이렇게 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 한다. ✳️ Debouncing : 주로 입력값 실시간 검색, 화면 resize 이벤트에 사용 전등 스위치 버튼 누르면 불이 깜빡이다가 켜지는 것! 디바운싱이 실행된 것이다. 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/eit6TW/btsEZRKJi6Y/RVvtsiM9vca8rJGseKcLb0/img.png)
💡 리액트 쿼리에 대해 알아보자. ✳️ 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-saga 등 미들웨어를 채택해 사용할 수 있지만, 다음과 같은 문제가 있다. 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux 는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. ✳️ 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다. 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분이 아니니 잘못이 일어나도 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적! ✳️ 주요 키워드 Query : 어떤 데이터에 대한 요청을 의미 - axios 의 get Mutation : 어떤 데이터(데이터 그룹 자체)..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b48RuJ/btsE7vTfDl5/STmGhUj2WyCCqtqqaTAkhk/img.png)
😇 useMemo 를 쓰지 않는데 자꾸 관련 에러가 뜨는 상황 얼마 전엔 잘 됐었잖아 너..? 사실 devToolsEnhancer 로 시작된 에러였는데 devToolsEnhancer 를 지우니 useMemo 에러가 떴다. 해결 방법은 npm i redux react-redux 를 다시 해주는 것.. 그리고 지웠던 devToolsEnhancer 도 살려보니 에러 없이 잘 작동했다. 이러고 며칠 뒤 또 다른 에러가 뜰지도.. 🔗 https://stackoverflow.com/questions/72095900/typeerror-cannot-read-properties-of-null-reading-usememo
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FDSxz/btsE6GU9nt1/ay2Jr31eae2ZT0gDaiWFx1/img.png)
💡 Custom Hooks 을 사용해 보자. 기존 input 값을 받아오던 방식 import { useState } from "react"; function App() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const onChangeName = (e) => { // 패스워드 관리 함수와 똑같이 생겼다 setName(e.targe.value); }; const onChangePassword = (e) => { // 네임 관리 함수와 똑같이 생겼다 setPassword(e.targe.value); }; return ( Custom Hooks ); } export default App; 반복되는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQSj1u/btsEZQELqAI/q1HBrEfBD5mcnD8s0C3Pg0/img.gif)
2024.02.19 - [React] - [React] Redux Thunk : 미들웨어 [React] Redux Thunk : 미들웨어 💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 aotoyae.tistory.com 💡 thunk 함수를 한번 더 구현해보자! thunk 함수 구현 리듀서 로직 구현 : reducers ➡️ extraReducers 서버 통신 : 100% 성공 ❌ (불확실) 지금까지의 redux state - todos, counter 앞으로의 state - isLoading, is Error, Data 기능 확인 : ne..