꾸준하게 거북이처럼

문제 상황 무한 스크롤을 구현했는데 문제가 있었다. 처음 렌더링이 되자마자 page가 setState에 의해 +1 증가가 되어서, 뒷 페이지가 먼저 렌더링 되었다. 여러 블로그글을 찾아본 결과, isLoading라는 상태값을 추가해서 페이지가 로딩 중이면 page+1 가 되지 않도록! 코드를 아래처럼 수정했다. import React, { useState, useEffect, useRef, useCallback } from "react"; const MainPage = () => { //... const [postList, setPostList] = useState([]); const [page, setPage] = useState(1); //.. const [isLoading, setIsLoading]..

고민했던 것 useMutate를 이용해서 자동으로 댓글 업데이트가 되도록 구현을 했지만, 이후에 '댓글 수정이 완료되었습니다!' alert같은 이벤트 이후 처리 부분을 어떻게 할지 고민했다. 해결한 방법 useMutate에서 제공하는 isSuccess를 이용해서 useEffect로 이후 처리를 했다. 하지만 이 방법은 먼가 코드가 깔끔하지 않았다.. 더 찾아보니 mutateAsync 를 제공해서 이걸 사용하여 이벤트가 발생하면, 비동기 처리함수로 이후 동작을 처리할 수 있을 것 같았다. 개선해보기✨ 이전 코드 const { mutate: editMutate, isSuccess: isEditSuccess, isError: isEditError, } = useEditComment(comment.postId,..

사용하게 된 계기 🧐 개인 프로젝트를 하다가, 댓글을 입력한 뒤에 새로고침없이! 자동으로 업데이트 된 댓글 목록을 불러오게 하고 싶었다. 그래서 react query를 이용해서 useQuery, useMutate를 이용해서 데이터 가져오기, 수정 및 삭제 API 요청 용도로 사용해보기로 했다.! 1. react-query 설치 npm i @tanstack/react-query 2. 앱 최상단에 provider로 감싸주기 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient();// => queryClient 선언해주기 const root = ReactDOM.cre..

useRef를 이용해서 모달 외부 화면 클릭시, 모달이 사라지도록 구현해보고자 한다. 1. ref = useRef() 2. modalCloseHandler() 정의 3. useEffect 내에서 addEvenlistener, removeeventlistener 사용. 4. 모달 감싸는 element tag에 ref 적용. const Comment = () => { const ref = useRef();//***** useRef 사용. const [modalFlag, setModalFlag] = useState(false); const modalCloseHandler = ({ target }) => { // 모달이 열려있고, ref 영역이 아닌 영역클릭시, 모달 닫기. if (modalFlag && !re..

🤔 이 두가지의 차이점은 뭘까? 1. useState는 state의 값이 달라질 때마다 컴포넌트가 리렌더링 됨. 2. useRef는 ref값이 변한다고 컴포넌트가 리렌더되지 않는다. useRef 특징 - DOM 엘리먼트 가리키는 용도로만 사용되지 않음 ( 지금까지 그렇게만 사용해 봤다..) - state와 달리 값의 변화에 의한 리렌더링이 발생하지 X - current 속성을 통해 어떤 값이라도 들고 있을 수 있는 저장 역할해줌. => 컴포넌트의 고유한 값을 저장할 방법으로 useRef를 이용할 수 있음. 📌 결론 1. state는 컴포넌트의 생명 주기와 밀접한 연관이 있는 요소를 저장하는 것이 적합하다. 2. ref는 렌더링과 관련이 없는 값을 저장하게에 적합하다. 참고 [React.js] useRef..

프론트에서는 API 요청을 할 때가 많다. 하지만 CORS에러가 나기 때문에 조치를 해줘야한다. 만약 API를 요청할 링크가 https://www.xxxxx.com/post/xxxx/xxxxx 와 같은 형식이라면, 1. pakage.json에 사이트 도메인 링크를 proxy에 추가해주기. pakage.json에 변경사항이 있다면 서버 껐다가 다시 켜야한다. { "proxy": "https://~ com" } 2. API 요청하는 부분 형식 const URI = "/post/xxxxxx/xx" const API_KEY = "1213ERASEDFTxxxx"; const get = async () => { try { const data = await axios.get(URI, { headers: { Autho..

setState를 할 때, 이전 state 값을 이용해서 state를 업데이트를 한다면? 추천하는 방법이 있다. setState(prevState => ({...prevState, new: 'xx' })); setMessage((message) => [...message, newObj]); 더 정확하게 state를 업데이트 할 수 있다. 일반 변수를 사용했다가 빈배열이 들어가져서,, 오류를 찾는데 많은 시간을 쓴 적이 있다.😂

react를 하다가 그런 경험이 있을 것이다. 어떤 함수가 어떤 state에 의해 리렌더링를 하면서 그 때마다 함수 호출, 같은 연산을 하는 일을 하게 된다. 이렇게 같은 연산을 반복하면 성능이 안좋아질 수 있다. 이럴 때 useMemo를 사용할 수 있다. useMemo는 리액트 어플리케이션 성능을 최적화하기 위한 방법인 연산 결과를 재사용한다. useMemo => useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 한다. 한 번 연산해본 결과를 기억해두고, 다시 동일한 입력이 들어오면 기억해둔 데이터를 반환하는 방법. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 여기서 state로 관리하는 변수..

비제어 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 프로젝트를 하는 중인데, 나는 input value를 state로 관리를 했다. onChange를 이용해서 최근읜 state값을 저장하는 방식을 사용했다. 하지만 이 방법은 검색어나 input을 입력할 때마다 setState를 하기 때문에 그 때마다 리렌더링을 하게 된다. 그래서 리렌더링을 좀 더 줄일 수 없을까 생각을 하게 되었다. React 공식 문서에 따르면 다른 방법으로, useRef를 사용해서 DOM에서 form 값을 가져올 수 있다. class NameForm extends React.Component { constructor(props) {..

9파일 나누서 (Link to 설정, Route 설정 부분 나눌려고 했음) React Router 쓰려다가.. 아무리 해도 컴포넌트가 화면에 렌더링이 안되고 아무런 에러가 안났다.. 이유를 2시간 넘게 찾아본 결과, 밑에 Route 첫 줄에 이미 / 경로면 어디로 이동하는지 설정을 해서 문제가 생긴것!! const App = props => ( } /> ); Switch switch case 문처럼 인자에 맞는 경우에 따라 코드를 처리를 해준다. 근데 만약에 없는 인자라면? 그냥 넘어가고 끝낸다. 위에 / 코드를 설정해주고 그 이후로 다른 path에 대한 Route 설정을 안해줘서 그런지 Switch문이 더이상 path에 신경을 껐나보다,, 다른 파일에서 Route 설정해줬는데, App index.jsx..