기술스택/React.js (9) 썸네일형 리스트형 [React 19] useReducer `useReducer` 훅은 컴포넌트 최상단에서 리듀서로 상태를 관리하게 해준다. 리듀서란?Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer. 많은 상태 업데이트를 갖는 컴포넌트가 여러 이벤트 핸들러에 걸쳐있으면 성능저하가 일어나는데, 이러한 여러 상태 업데이트를 하나의 함수로 통합하여 사용할 수 있으며, 이 함수를 리듀서라고 부른다. import { useState } .. [React 19] useMemo useMemo는 useCallback과 비교되는데, 둘 다 메모이제이션을 한다는 점에서 공통적이지만 어떤 것을 반환하느냐의 차이로 정리할 수 있을 것 같다. 메모이제이션 기법은 연산 결과를 어딘가에 저장해두고, 동일한 입력이 들어왔을 때 재연산 하지 않고 저장된 값을 재활용하는 기법이다. useCallback은 dependencies 안에 있는 값이 바뀌었을 때, 함수를 리턴하는 기능을 갖는다.useMemo는 마찬가지로 dependencies 안에 있는 값이 바뀌었을 때, 연산의 결과값을 리턴하는 기능을 가진다. 공식문서에서는 React Hook that lets you cache the result of a calculation between re-renders.리렌더링간 발생하는 연산 결과를 캐시하는.. [React 19] useEffect React Hook 중에 가장 유명한(?) 두개의 Hook이라고하면 나는 useEffect와 useState를 먼저 떠올린다. useEffect는 외부 시스템으로과 컴포넌트를 동기화(synchronize a component with an external system)하는 리액트 훅이라고 공식문서에서 설명하고 있다. 외부 시스템과 컴포넌트를 동기화 한다는 말이 무슨 뜻일까? 다시 공식 문서를 보면 For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the sc.. [React 19] useContext 앞선 포스팅에 이어, useContext도 같은 맥락으로 오래전부터 존재하던 hook이다. React에서의 데이터 흐름을 생각해보면 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 넘겨주게 된다.부모 -> 자식으로만 이동하므로 '단방향'이라고 할 수 있다. 그러나 전역(global)으로 사용되는 데이터를 컴포넌트 트리에서 단방향으로 계속 넘겨주는 구조는 효율적이라고 말하기 어렵다. React에서는 이러한 문제점을 해결할 수단으로 Context API를 제공한다. 부모 컴포넌트의 데이터를 자식 컴포넌트가 참조할 때 자식 컴포넌트가 부모 컴포넌트의 부모 컴포넌트에 있는 값을 받아오려면 순차적으로 부모의 부모 -> 부모 -> 자식 순서로 받아와야 하지만, Context API를 사용하면 다이렉트.. [React 19] useCallback useCallback이 React 19에 새로 추가된건 아니고 훨씬 이전부터 있었지만 다시 한번 정리하는 차원에서 포스팅한다. useCallback은 리렌더간 함수의 정의를 캐시하게 하는 훅(lets you cache a function definition between re-renders)이다.성능 최적화를 위한 메모이제이션 기법 중에 하나로 useMemo와 대조되는데, useMemo는 후속 포스팅에서 정리하는 것으로 하고 이 포스팅에서는 useCallback에 집중한다. useCallback의 기본적인 구조는 이렇다. const cachedFn = useCallback(fn, dependencies) 두개의 인수를 전달받는데, fn은 콜백함수로 캐시하고자 하는 함수 자체이다. 이 함수는 메모이제이션 .. [React 19] useActionState Form Action의 결과에 따라 상태를 업데이트(to update state based on the result of a form action)할 때 사용한다. 기본적인 형태는 form이 제출되거나 버튼을 누를 때 호출하는 함수, 초기값, form이 수정되는 unique한 페이지의 URL을 전달해준다. 리턴되는 값은 배열 형태이며, 초기상태 또는 action이 호출된 후에는 action의 반환된 값과 form 컴포넌트에 action props를 전달하거나 form 컴포넌트 내에 있는 버튼 컴포넌트에 formAction props를 전달할 수 있는 새로운 action의 형태이다.isPending은 action을 처리하는동안 대기상태에 있는지를 나타낸다. const [state, formAction, i.. [React.js] 이미지 / 파일 업로더 구현 이미지나 파일을 업로드해서 뷰로 보여주는 라이브러리가 존재하지만 라이브러리에 너무 의존하다보니 에러가 발생하면 에러를 극복하는데 시간을 허비하기 때문에 답답하기 마련이다. 이미지와 파일을 업로드했을 때 이미지는 뷰로, 파일은 리스트 형태로 보여주는 기능을 구현해보았다. 여기서 이미지는 클릭했을 때 파일 탐색기를 열어 파일을 불러와 64비트 인코딩을 통해 문자열로 나타내준다. 일반적인 파일 업로더는 파일 이름과 닫기버튼이 함께 보인다. https://github.com/htwenty-1/react-file-uploader [React.js] React Router 기본, 중첩 Router 사용하기 1. Routing이란? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 a 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식이다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 화면 깜빡임이 지속될 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것이다. 위에서 구현한 예시는 간단한 예제이기 때문에 그러한 불편함을 느끼기 어려울 것이나, 페이스북이나 인스타그램처럼 퓨어 텍스트보다 압도적으로 높은 용량의 이미지/영상 컨텐.. 이전 1 2 다음
