React (9) 썸네일형 리스트형 useMemo와 useCallback 사용하기 메모제이션과 성능 최적화 메모제이션(memozation)을 통해 성능을 최적화할 수 있다. 메모제이션이란 연산 결과를 캐싱하고, 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 프로그래밍 기술이다.동일한 연산 과정이나 결과를 불필요하게 다시 계산하지 않는 것이다.여러 번 호출되는 함수나 컴포넌트, 또는 연산결과가 있을 때 메모제이션을 이용할 수 있다.리액트에선 useCallback, useMemo와 같은 메모제이션 훅을 지원하고 있다.이 둘에 대해 알아보자. useCallback과 useMemouseMemo is a React Hook that lets you cache the result of a calculation between re-renders. useCallbackis a React Ho.. (번역) {상태 전이} = f(상태) https://ricki-lee.medium.com/%EB%B2%88%EC%97%AD-%EC%83%81%ED%83%9C-%EC%A0%84%EC%9D%B4-f-%EC%83%81%ED%83%9C-08b98e781779 (번역) {상태 전이} = f(상태)원문: {transitions} = f(state)ricki-lee.medium.com React 애플리케이션을 개발하다 보면 비동기 요청이나 동시성 모드로 인한 상태 전이 이슈가 생각보다 자주 발생합니다. 이 글은 "{상태 전이} = f(상태)"라는 간단한 공식을 통해 컴포넌트를 상태 기계(State Machine)로 모델링하면, 이런 문제를 어떻게 효율적으로 방지할 수 있는지 보여줍니다.이 글에서는 낙관적 업데이트, 대기 상태 표시, 그리고 React의 .. 리액트 서버 컴포넌트 톺아보기 (번역) https://open.substack.com/pub/kofearticle/p/korean-fe-article-896?r=5by9cy&utm_campaign=post&utm_medium=web&showWelcomeOnShare=false [Korean FE Article] 리액트 서버 컴포넌트 톺아보기글 링크: https://roy-jung.github.io/250323-react-server-components/kofearticle.substack.com Next.js는 버전 13부터 React 18에서 도입된 서버 컴포넌트를 지원하고 있습니다. 시간이 흐르면서 많은 분이 이를 익숙하게 활용하고 있지만, 저처럼 개념을 충분히 이해하지 못한 채 습관적으로 사용하는 경우도 있을 텐데요. 이러한 고민을 가.. useState의 렌더링 방식 이해하기(feat.batching) useState란?사용자와의 상호작용을 통해 값이 변경되는 데이터들이 있다.예를 들어, 버튼을 누르면 화면의 카운트 숫자가 1씩 증가한다거나, 특정 필드의 숨김이 on/off 된다거나… 그러나 만약 x=1, a='apple' 처럼 변수에 값을 직접 할당하는 방식으로 값을 업데이트한다면,화면은 어떠한 변화도 없을 것이다. 내부적으로 데이터의 값은 변경됐더라도 그뿐, 컴포넌트가 재렌더링이 되진 않기 때문이다. 만일 재렌더링이 된다 치더라도 기존의 값이 초기화되면서 제대로 값의 변경을 반영할 수 없다.버튼을 누를때마다 카운트 숫자가 1씩 증가하려해도 이전 값을 기억못하면 올바르게 반영되지 않을 것이다. 이벤트 함수가 실행되더라도 컴포넌트 렌더링을 호출하지도 못할 뿐더러,렌더링되더라도 다시 초반과 똑같이 변수가.. Tanstack-Query(React-Query) React-Query란?서버로부터 데이터 fetching, caching, 서버 데이터와의 동기화 및 업데이트 등 데이터를 효율적으로 관리할 수 있도록 하는 라이브러리 ** React-query v4부터는 패키지 이름이 @tanstack/react-query로 변경되면서 React에만 국한되지 않은 범용 프론트엔드 라이브러리로 개선되었다. 왜 필요하나? 대표적인 기능은 다음과 같다.- 데이터 가져오기 및 캐싱- 동일 요청의 중복 방지- 자동 새로고침을 통해 데이터 최신 상태 유지- 성능 최적화: 무한스크롤, 페이지네이션 등 사용 방법 아래는 공식문서에 있는 예시 코드이다.세가지 핵심 개념인 Queries, Mutations, Query Invalidation 정도만 알면React-Query를 바로 시작.. Redux 정리 Redux란? Redux란 "글로벌(전역)" 상태값을 관리 및 업데이트하는 패턴 혹은 라이브러리라고 정의할 수 있다. 리액트에서 프로젝트 규모가 커지면서 컴포넌트 구성이 복잡해지면 관리하는 상태값이 많아지고, 상태 업데이트 로직들도 여러곳으로 분산된다. 상태값이 언제, 어디에서, 어떻게 업데이트 됐는지 찾기 힘들어지는 것이다.따라서 상태값을 같은 곳에서 전역으로 관리할 필요성이 대두되는데, 이를 도와주는 것이 리덕스이다. 사용자가 무슨일이 일어났는지를 묘사하는 action이라는 이벤트가 트리거되면,이에 따라 분리된 상태 업데이트 로직인 reducer 함수가 새로운 상태값을 반환하는 패턴으로 정리할 수 있다. Store 먼저 state를 저장하는 전역 저장소 store.js를 정의하자. // store.j.. state를 reducer로 작성하기 참고) https://react.dev/learn/extracting-state-logic-into-a-reducer Extracting State Logic into a Reducer – ReactThe library for web and native user interfacesreact.dev리액트 프로젝트 규모가 커지다보면, useState만으로 상태를 관리하기에 꽤나 까다롭다.어떠한 반응이 일어나기 위해 setter 함수를 호출하기까지의 로직을 하나의 이벤트 핸들러에 작성해야하는데, 코드량이 많아지면서 가독성은 떨어지게 된다. 로직을 한 눈에 알아보기 힘들어 오류가 발생하면 어디서 일어났는지 찾기도 힘들어진다.이러한 가독성과 디버깅 간편화를 위해 컴포넌트 내에 로직을 몰아넣기 대신,컴포넌트 내부에.. useRef와 권장사항 useRef리렌더링없이 값을 변화시킬 수 있는 hookconst ref = useRef(0);{ current: 0 // The value you passed to useRef} useRef는 current를 key로 하는 객체를 반환한다.따라서 ref.current 로 ref의 현재값에 접근할 수 있다.언제 사용하는가? DOM 요소에 직접 접근하거나 조작할 때리액트 외부 API를 사용할 때 ex) timeout IDs권장사항 렌더링 중 ref를 읽거나 쓰지마라.ref는 react의 렌더링 사이클과 독립적으로 실행되기 때문에 react는 ref의 현재값이 업데이트 됐는지 안 됐는지 모른다.따라서 렌더링 시점에선 아직 ref의 값이 업데이트되지 않았거나, DOM이 아직 생성되지 않았을 수도 있다.ref는 .. 이전 1 2 다음
