목록웹 개발/React (70)
dukDukz
무지성 React - 리렌더링 막고 싶어요... 무지성으로 습득해서 나름대로 뇌피셜을 적는 공간굉장히 비 학습적인 게시글이며 무지하기 때문에 여기 있는 정보를 정보라고 생각하면 안됩니다. 재미로 보면서 이런 허접도 있구나 라고 웃 velog.io 여기에 있는것 처럼.. 특정 값의 state 를 변경하면 영상이 깜빡거리면서 재시작하는 문제가 있었다. 프로젝트를 진행할 때 좋아요 버튼을 누르면 추천수가 올라가게 되어있었는데 좋아요, 추천수 state가 변하면서 리렌더링 되는것에서 문제가 발생한것이다. 그래서... 컴포넌트를 분리를 해주었다. 영상 부분 컴포넌트로 빼고 좋아요 관리하는거 컴포넌트로 빼고 좋아요 추천수 state를 자식 컴포넌트에서 관리하는걸로 바꿔줬다. 원래는 부모 컴포넌트에서 state 관리..
https://cotak.tistory.com/112 [React.js] API를 연동한 Pagination 구현 React Pagination 구현하기 리스트를 띄워줄 페이지를 만드는 과정에서 Pagination이 필요했다. 처음엔 Material-UI에서 제공하는 Pagination 컴포넌트를 이용해서 구현하려 했으나 문제가 있었다. 삽질끝에 cotak.tistory.com 이 글 을 참고해서 페이지 네이션을 구현했다. [조건] - API 통신 시 모든 데이터를 한번에 다 받아야 한다. (총 개수 필요함) - 총 개수가 있으면 한번에 얼마나 display 할지 설정만 해주면 알아서 나오게 된다. 근데 이번에 진행한 프로젝트에서는 전체 개수가 아니라 각 페이지 별로 10개씩만 나오게 했기 때문에 이걸 ..
https://zih0.tistory.com/2 React.js Dropzone 라이브러리 사용하기 공식 문서 : https://react-dropzone.js.org/ 공식 문서를 기반으로 작성합니다. 라이브러리 설치 npm install --save react-dropzone yarn add react-dropzone or: yarn add react-dropzone 기본 사용법( 훅스를.. zih0.tistory.com
https://www.inflearn.com/questions/375416 useHistory 오류 발생하시는 분들계시다면 - 인프런 | 질문 & 답변 'usehistory' is not exported from 'react-router-dom'. 이러한 오류가 발생해서 , 검색을 해보니 useNavigate로 변경되었다고 합니다. import { useNavigate } from 'react-router-... www.inflearn.com Attempted import error: 'useHistory' is not exported from 'react-router-dom'.
https://stackoverflow.com/questions/70319827/missing-queryfn-error-when-using-usequery Missing queryFn error when using useQuery As the title suggests, I am new to using useQuery and the associated libraries, I am trying to use it to fetch data and then populates a list of fields that I have created However when I run it I get stackoverflow.com export const videoInfo = (onSuccess, onError, id) =..
https://grahams.tistory.com/203 [react.js]classNames 사용방법 설치 yarn add classnames 사용방법 ClassNames.js import React from 'react'; import classNames from 'classnames/bind'; import styles from './ClassNames.scss'; const cx = classNames.bind(styles); cons.. grahams.tistory.com https://react.vlpt.us/styling/02-css-module.html 2. CSS Module · GitBook 02. CSS Module 이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트..
https://techblog.woowahan.com/6339/ Store에서 비동기 통신 분리하기 (feat. React Query) | 우아한형제들 기술블로그 오늘은 주문에서 사용하는 FE 프로덕트의 구조 개편을 준비하며 FE에서 사용하는 Store에 대해 개인적인 고민 및 팀원들과 검토하고 논의했던 내용을 소개합니다. 이 과정에서 생긴 여러 가지 의 techblog.woowahan.com 여기를 읽어보면 왜 react-query가 필요한지 알 수 있다. 간단하게 정리하자면 Store에서 비동기 통신을 분리함으로써 store에서는 온전히 상태관리만 할 수 있게 하는 것이다. 그리고 react-query를 쓰면 로딩, 에러 처리가 엄청 간단해진다. https://www.youtube.com/watch?..