전체 글 (18) 썸네일형 리스트형 [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 } .. [Rust] 러스트 설치부터 Hello World까지 러스트가 최근에 많이 핫하다.원래 백엔드나 네이티브 응용 프로그램 만드는건 Java로 많이 했었는데 취미(?)겸 기본은 익혀둬볼까한다. 어디선가 봤던건데 C로 작성한 코드를 러스트로 리팩토링 했을 때 코드가 매우 짧아졌었다.그리고 C에서 제공안하는 다양한 것들을 러스트는 제공하기 때문에 앞으로 더욱 유망해지지 않을까 생각한다. 한국 커뮤니티의 사이즈는 아직 매우 작은 규모인 것 같다. 앞으로 더욱 성장하길 바란다. https://doc.rust-kr.org The Rust Programming Language - The Rust Programming LanguageSteve Klabnik, Carol Nichols 지음. 기여해주신 러스트 커뮤니티 여러분과 한국어 번역에 참여해주신 분들께 감사드립니다. .. [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.. [사내] 신규 시스템 개발이 끝난 후 회고 나는 지금 재직하고 있는 회사가 처음 시작할 때부터 몸담고 있는 멤버다.MVP 개발을 하기 위해 Flutter를 프론트엔드 프레임워크로, 백엔드는 Firebase에서 제공하는 다양한 솔루션을 사용했다.빠르게 개발해서 굴려보기 위한 목적으로 속도감 있게 개발할 수 있는 것으로 프레임워크 등을 선택해야 했기 때문에 Flutter를 사용했던 것으로 기억한다. 정말 웹을 위한 기술을 사용했다면 CSS처럼 손 많이 가는 것들이 많을텐데 Flutter는 Material이나 Cupertino에서 제공하는 기본적인 스타일 정도는 지원을 했으니까. Flutter는 좋은 프레임워크이다. 스마트폰이라는 하드웨어에서 제공하는 블루투스 같은 것을 직접 제어할 상황이 아니라면 말이다. 단순한 CRUD만 일어나는 환경에서는 Flu.. 이전 1 2 3 다음
