Frontend Study - 2/React (21) 썸네일형 리스트형 React : useRef props넘겨줄 때 주의할점. forwardRef. form에서 input의 value를 가져올 때, useState를 사용하는 것보다 useRef를 사용하는 것을 선호한다. useState를 쓰면 계속 렌더링 된다는 것이 신경 쓰인다. 이번에도 회원가입 form을 만들면서 ref를 썼는데 결론부터 말하자면 ref값을 props로 전달하는 과정에서 고생했다. ref는 예약어이기 때문이다. (예약어 : 쓰임이 이미 정해져 있는 키워드) const SignupForm = () => { const emailRef = useRef(null); return ( ) } const InputForm = ({id, ref}) => { return ( ) } 이런 식의 구조였다. InputForm 컴포넌트에 직접 ref를 이용해서 props를 전달하려고 한게 잘못이었다... React : 컴포넌트의 재사용 with children - Wrap Component (확장하기) 컴포넌트를 재사용할 때, 특정 부분을 제외하거나 추가해서 재사용하고 싶을 때가 있다. 그 때 유용하게 쓸 수 있는 방법. 컨테이너 처럼 배경을 지정하고, 안의 내용에 원하는 요소를 쉽게 집어 넣는 것. import React from "react"; const AppWrap = () => { return ( // { return ( {children} ); }; 배경으로 쓸 요소를 컴포넌트로 지정하고 그 안에 들어갈 내용을 wrapComponent를 이용해서 children으로 전달하는 방식으로 활용할 수 있다. React : Immer 사용하기 주로 리액트 상태관리에서 useState, 전역관리에는 context API, Redux를 사용했었는데 상태와 관련한 그 밖에 다른 라이브러리들이 있었다. 중첩되어 있어서 복잡한 형태라면 useReducer를 통해 별도 함수를 만들어 관리 할 수 있었고, (분리되어 있기 때문에 재사용 가능하고, 테스트하기에도 편하다) 이번에 공부하게 된 Immer 라이브러리는 상태변경과 관련된 라이브러리이다. 중첩된 객체 데이터의 변경에서 보다 더 편하게 사용할 수 있었다. 기존의 방법보다 훨씬 직관적으로 변경할 수 있게 된다. 기존 리액트에서는 상태를 변경할 때 기존 상태값을 직접적으로 바꾸는 것이 아니라 불변성을 지키며 상태를 변경시킨다. 보통 spread 연산자를 사용하여 기존데이터의 복사본을 만든 뒤에 그 복사본.. React : useEffect에서 async 쓰기. 아.. 너무 고됐다. 잘못된 구글링이 얼마나 위험할 수 있는지 느꼈던 경험이었다. 시작 단추를 잘 못 끼워 맞춰서 한참을 해맸다. stackoverflow에 아래의 예시와 같이 써진 코드를 참고해서 작성하는데, 한참을 해도 작동이 안됐었다. useEffect(async () => { const data = await fetchData(); }, [fetchData]) 작동이 안됐던 이유는, useEffect의 첫번째 인자는 undefined 혹은 함수를 리턴하는데, async함수는 Promise를 리턴하기 때문이라고 한다. 이것을 해결하기 위한 방법은, 비동기 함수 선언을 useEffect안에 넣어버리는 것이다. useEffect(() => { // declare the data fetching func.. React : useCallback 성능 최적화 어디에 사용하나? + 함수의 재사용, 객체 데이터의 저장과정. 1. 함수, 객체 데이터 저장과정 함수, 객체의 데이터 저장에 대한 개념을 바탕으로 useCallback의 쓰임새에 접근하면 더 이해가 쉽다. 자바스크립트에서 함수는 객체 데이터로 인식되며, 객체 데이터는 원시데이터와 다르게 Heap안에 저장된 메모리 주소 값을 참조하는 식으로 변수에 저장된다. ex) let melon = { name: melon, color : green } ; 1. Heap 에 오브젝트 데이터 값 저장. -> { name: melon, color : green } 2. Heap에 저장된 곳의 주소값 -> Ox1212 3. 그 주소값을 call stack 메모리셀에 전달 & 저장. 4. 주소값이 저장되어 있는 데이터값의 주소 확인. -> Ox0013 5. 해당 주소를 변수 melon .. React : Context API - props 없이 state 공유 하기. Context API의 활용. 1) 어플리케이션 전반적으로 모든 컴포넌트들이 필요한 상태값의 공유 ( ex) 다크모드, 언어, 로그인유무) 2) 거리가 먼 컴포넌트들 간의 상태값 공유. ex) G컴포넌트와 J컴포넌트가 prop drilling 없이 상태값을 공유할 수 있게 한다. 이 때 중요한 것은 '무조건' Root Component에 Context를 심으면 안된다는 것이다. Context API는 렌더링을 발생시킨다. 상태값이 변화할 때 상태값을 사용하지 않는 컴포넌트들도 같이 재렌더링 되기 때문에 무분별한 사용은 지양해야 한다. 그렇기 때문에 빈번히 업데이트 되는 상태라면 Context API를 사용하지 않는 것이 좋다. - 최대한 효율적으로 사용해야 한다. 예를 들면 B컴포넌트와 C컴포넌트가 공유.. React : 성능개선 lazy , memo, useMemo , useTransition, useDeferredValue 1. Lazy 리액트는 SPA (Single Page Application) 이기 때문에, 결국 하나의 js 파일에 모든 정보가 다 담기게 된다. 그렇기 때문에 리액트로 만들어진 사이트에 들어갈 때, 처음에 모든 정보를 다 로딩하는 과정에서 버벅 거리는 경우가 있다. 사실 첫 페이지에서 굳이 로딩이 필요하지 않은 페이지들이 있다. 그래서 그런 페이지들의 경우 바로 로딩하지 말고, 필요할 때 import 하도록 해 ! 라는 기능을 부여하는 것이 lazy 이다. Import {lazy} from “react”; //import Detail from ‘./routes/Detail.js’ //import Cart from ‘./routes/Cart.js’ const Detail = lazy(() => impor.. React : React-Query : useQuery ajax 서버 통신의 응용 ajax를 통해 데이터를 받을 때, 다양한 기능을 추가할 수 있다. 성공 / 실패시에 특정한 일을 하도록 할 수 있고, 몇 초마다 자동으로 요청을 하게 할 수 있게 하는 것. React-Query의 useQuery를 통해서 쉽게 할 수 있다. 그리고 useQuery의 가장 특징 중 하나는 캐싱이 된다는 것!! useQuery를 통해 데이터를 불러올 때 옵션으로 staletime과 cachetime을 보낼 수 있다. 이 둘을 잘 구별해야 한다. * 공식문서 staleTime: number | Infinity Optional Defaults to 0 The time in milliseconds after data is considered stale. This value only applies to the h.. 이전 1 2 3 다음
