띵동

리덕스를 사용해 전역으로 값을 관리하며 최적화를 진행했다. 1. reselect 라이브러리를 사용하여 selector로 관리하는 값 memoization 2. react-redux에서 제공하는 shallowEuqal 함수를 사용해 렌더링 최소화 shallowEqual 함수는 객체의 가장 겉에 값들을 모두 비교하는데, const object = { a: { x: 3, y: 2, z: 1 }, b: 1, c: [{ id: 1 }] } 위 객체가 있다면 object.a, object.b, object.c만 비교하고 object.a.x 처럼 한뎁스 더 들어가는 값들은 비교하지 않는다. shallowEqual 말고 useSelector로 가져온 값을 객체 형식이 아닌 독립적으로 선언해줘도 된다. // shallo..

state는 한 컴포넌트의 상태를 나타내는 것으로, 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며 컴포넌트 안에서 데이터를 변경 가능하게 한다. 리액트의 함수 컴포넌트에서 state를 사용하기 위해서는 useState라는 hook을 사용해야 한다. useState는 state 변수의 초깃값을 매개변수로 전달하여 호출하고, 결괏값으로 배열을 반환한다. 그 배열은 [초기값이 들어간 변수, 값 변경이 가능한 함수]로 이루어져 있다. 그래서 useState hook을 사용할 때는 구조 분해 할당을 사용하여 변수에 값을 넣어준다. const [count, setCount] = useState(0); 만약 state 형태가 배열이거나 객체라면, 값 추가 및 수정시 알아야 할 것들이 있다. 값 추가 시, s..

리액트로 서비스를 개발한 후 npm run build를 통해 발행하면 하나의 큰 html, js, css 파일이 만들어지는데, 이때 하나의 js 파일에 지금까지 개발한 컴포넌트들이 다 들어가게 된다. 그러다 보니 이 js 파일은 사이즈가 매우 커서 메인 페이지에 접속하게 되면 로딩 속도가 느려진다. 이때 lazy를 사용해 js 파일을 나눌 수 있다. 메인 페이지에서 보이지 않는 컴포넌트를 import 할 때 lazy를 사용한 방식으로 import 하면 된다. // (App.js) import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' // (App.js) import {lazy, Suspense} from 'react' co..

서버랑 통신하는 기능들을 ajax로 구현하다 보면 응용 기능들이 필요할 때가 있다. - ajax 성공/실패 시 다른 UI 보여주기 - 몇 초마다 자동으로 ajax 요청 - 실패 시 몇 초 후 요청 재시도 - prefetch (다음 페이지 내용 미리 가져오기) react-query 라이브러리를 사용하면 위 기능들을 쉽게 구현할 수 있다. react-query는 실시간 데이터를 계속 가져와야 하는 사이트에서 잘 사용된다. 아래는 npm i react-query 후 초기 세팅 화면이다. (index.js) react-query를 사용해 ajax 요청을 하기 위해서는 useQuery 함수를 사용하면 된다. useQuery를 사용하면 ajax 현재 상태를 쉽게 파악할 수 있다. let result = useQue..

서버에서 상품 데이터를 가져와서 화면에 보여주다가 이미지 정보를 제대로 가져오지 못해 엑박이 뜨는 경우가 있을 수 있다. 그럴 때 onError를 사용하여 기본 이미지를 사용하여 대체할 수 있다. // 대체 이미지 import import replace from '../assets/replace.png'; // error 발생 시 대체 이미지로 이미지 설정 const onErrorImg = (e) => { e.target.src = replace } // img 태그에 onError 설정 원래는 이미지 엑박이 떴었는데 기본 이미지로 잘 대체된 것을 볼 수 있다.

styled-components는 props를 활용하여 조건에 따른 스타일링을 할 수 있다. class 이름으로 따로 나누지 않아도 props를 사용하여 조건에 따른 스타일링을 할 수 있어 편리하다.

useMemo는 컴포넌트 성능을 최적화하는 데 사용되는 리액트 훅 중 하나이다. useMemo에서 Memo는 memoization을 뜻하는데, 이는 동일한 값을 리턴하는 함수를 반복적으로 호출해야 될 때 맨 처음 값을 메모리에 저장해서 필요할 때마다 재사용하는 기법이다. useMemo는 처음 계산된 결괏값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링되어도 해당 함수를 계속 호출하지 않고, 메모리에 저장해둔 값을 재사용할 수 있게 해 준다. useMemo는 두 개의 인자를 받는다. 첫 번째는 콜백함수, 두 번째는 배열이다. // useMemo(콜백함수, 배열) const value = useMemo(() => { return calculate(); }, [item]); 콜백함수가 리턴하는 값이 useM..

useRef가 반환하는 ref 객체를 접근하고자 하는 요소 태그에 ref 속성으로 넣어주면 해당 요소에 접근할 수 있다. input 요소에 focus를 줄 때 많이 사용한다. import React, { useEffect, useRef, useState } from 'react'; function App() { const inputRef = useRef(); const [input, setInput] = useState(""); useEffect(() => { inputRef.current.focus(); }, []) const onChange = (e) => { setInput(e.target.value); } return ( ); } export default App; useEffect와 useRef..

useRef는 변화는 감지해야 하지만 렌더링을 발생시키지 않는 값을 다룰 때 사용한다. 이것은 current라는 key 값을 가진 객체를 반환하는데, 여기서 value의 초깃값은 useRef의 인자 값이다. ref 객체 값은 수정이 가능하기 때문에 .current로 접근하여 언제든지 값을 수정할 수 있다. 그리고 반환된 ref 객체는 컴포넌트가 사라지기 전까지 유지된다. useRef는 state와 비슷하게 값을 저장하는 저장공간으로 사용된다. 하지만 여기서 ref와 state의 차이는 렌더링 발생 유무이다. state는 set 함수를 통해 값이 변화되면 렌더링이 되어 컴포넌트 내부 변수를 초기화한다. 반면 ref는 값이 변화되어도 렌더링이 되지 않아 변수들의 값이 유지되어 불필요한 값의 렌더링을 막을 수..

리액트의 return문에서 조건문을 사용하려면 JSX 문법을 사용해야 한다. 이때 삼 항 연산자를 많이 사용하는데, 중첩으로 사용할 때 헷갈려서 기록을 남긴다. 사용자 로그인 여부에 따라 보여주는 내용이 다르고, 로그인 한 사용자도 레벨에 따라 다른 내용을 보여주는 기능을 구현하기 위해 삼 항 연산자를 중첩해서 사용했다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import styled from 'styled-components'; import { LoginState } from '../../states/LoginS..