개발 일지/React (16) 썸네일형 리스트형 useRef 함수형 컴포넌트에서 useRef 를 사용하면 ref 오브젝트를 반환해준다. const ref = useRef(value) // {current: value} 반환된 오브젝트는 컴포넌트의 생애주기를 통해 유지가 된다. 그말은 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 것이다. 그럼 useRef는 언제 사용할까? 1. useRef 는 state와 비슷하게 어떠한 값을 저장해두는 저장공간의 용도로써 사용된다. state의 경우 state값이 바뀌면 -> 렌더링을 하고 -> 컴포넌트 내부 변수를 초기화 한다. state를 사용할때 우리는 원치않는 렌더링 떄문에 곤란해 질떄가 있다. 이떄 useRef를 사용하면 불필요한 렌더링를 막을 수있다. Ref의 값이 변경.. [Next.js] styled-component 적용하기 문제 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 발생 Header 부분 표시하려고 스타일 컴포넌트 적용하니 오류 발생 원인 자바스크립트 코드가 적용이 되지 않은 페이지가 미리 렌더링되기 때문에 CSS-in-JS 로 스타일링을 하면 스타일이 적용되지 않은 html 코드가 먼저 렌더링 되는 문제가 발생하게 된다. Next.js는 첫 페이지 로드가 SSR로 동작 ⇒ 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라진다. 해결 html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소들을 주입시켜서 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제를 해결할 수 있다. Next.js에서 styled-components를 사용할 때 ⇒ **_d.. [NextJs] react-query(prefetching)로 SSR 구현 성능 개선의 필요성 인식 진행하고 있는 프로젝트의 상세페이지는 SSR로 구현 되어있다. 프로젝트 MVP 주간에는 페이지가 렌더링 되면 클라이언트 사이드에서 데이터를 요청하는 방식이였으나 SSR의 장점을 활용하지 못한다고 판단하였고 react query의 prefetching 을 활용하는 방향으로 성능 개선을 진행하였다. react-query 의 prefetching 활용 우리 서비스를 이용하는 사용자는 대부분 상세페이지를 클릭할 것이다. 이럴 경우 사용자가 상세페이지에 필요한 데이터를 기다릴 필요가 없도록 미리 데이터를 가져오면 보다 좋은 사용자 경험을 제공할 것이다. 이때 사용 할 수 있는것이 react query의 prefetching 이다. 상세페이지는 prefetching 을 사용함에 있어 적합한.. [Next.js] A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. 경고 Next.js 제목 경고 문제 title 지정 후 Next.js 에서 아래와 같이 경고하였다. A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client renderi.. 새로고침시 데이터에 undefined가 들어온다면 문제 react-query 를 사용해서 get 요청한 데이터를 map함수를 돌려서 목록을 보여주었다. console.log 를 찍어보면 이렇게 undefined 가 나온다.그러나 새로고침시 데이터가 undefined 로 나와서 에러가 발생했다. 원인 처음 undefined된 값을 받아서 맵함수를 돌리니 당연히 목록이 나오지 않는것이다. 해결 useEffect 를 활용한다. data 의 값이 바뀔때마다 useEffect 실행 → 처음에 undefined 를 받더라도 잠시후 값들이 들어오기 떄문에 데이터를 잘 활용할 수있다. Next.js 에선 <img> 보다는 <Image> 문제 태그 사용시 Eslint 가 를 쓰라고 제안함 왜 ? Next/image 에서 제공하는 에 들어가는 파일의 유형을 webp 로 리사이징(최적화) 하여 기능개선에 도움을 준다. 해결 실제로 두개의 태그를 모두 사용하여 최적화 결과를 비교해 보았다. 브라우저 비교 결과 참고자료 Next.js 공식문서 https://nextjs.org/docs/messages/no-img-element no-img-element | Next.js No img element Prevent usage of element to prevent layout shift and favor optimized images. An element was used to display an image. Use next/image to impr.. Custom hook 만들기 Custom hook 이란? 반복되는 로직을 재활용 하는 방법 중 하나 -> 커스텀 훅은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위한 함수 이다. --> 중복되는 코드 하나로 합쳐서 사용할 수 있음 Custom hook 사용 시 주의할 점 1. 함수명이 use로 시작해야 한다. 2. 최상위에서만 호출할 수 있다. 3. 리액트 함수 내에서만 호출할 수 있다. 4. 꼭 return 값을 주자. UseInput 이라는 커스텀 훅 만들어 보기 // src/hooks/useInput.js import React, { useState } from "react"; const useInput = () => { // 2. value는 useState로 관리하고, const [value, setValue] =.. React-query removeQueries 검색결과 페이지에서 헤더에 있는 지역 검색을 하면 제목은 바뀌는데 데이터가 늦게 들어와서 목록이 바뀌지 않는 문제가 발생됬다. (잘되다가 간혈적으로 안됨) 이러한 현상은 많은 데이터를 불러오는 지역에서 더 많이 발생됬는데 추측하기로는 너무 많은 데이터를 요청해서 문제가 있나 싶었다. 만약 내가 사용자라면 검색 버튼을 눌렀을때 검색 결과가 바뀌지 않는다면 이상하다고 생각했을 것이다. 그래서 우리 팀원분중 한분이 생각 한게 removeQueries() 를 사용 하자는 것이 였다. removeQueries() 이 뭐냐면 기존 캐시값을 지워버리고 새롭게 데이터를 받아 온다 이렇게 생각하면 쉬울것이다. 그래서 데이터 요청시 새로운 캐시값을 만들어야 하기 때무네 -> isLoading 이 활성화 됨 // Searc.. 이전 1 2 다음
