본문 바로가기

개발 공부

(21)
[React] useCallback은 무엇일까? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. 즉, 함수가 정의되고, 리랜더링이 일어나고 의존성 배열이 바뀌지 않는다면 함수는 새로 만들어지지 않고 기존의 함수가 반환됩니다. 사용법 import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // ... - 리렌더링 사이에 캐시할 함수, 함..
[React] useEffect()를 제거해보자! effect를 제거했을 때 이점 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 오류 발생 가능성이 줄어든다. 불필요한 Effect를 제거하는 방법 1. 렌더링을 위해 데이터를 변환하는 경우 - 렌더링 과정: React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산한다 -> 화면 업데이트 -> Effect 실행 - Effect를 이용하여 state를 즉시 업데이트 한다면, 전체 프로세스가 처음부터 다시 시작된다. - 즉, 불필요한 렌더링이 발생한다. - 해결법: 데이터 변환을 컴포넌트 최상위 레벨에서 진행하면, props나 state가 변경될 때 해당 코드가 다시 실행된다. 2. 사용자 이벤트를 처리하는 경우 - 이벤트 핸들러를 제작할 경우 어떤 일이 일어나는지 정확하게 알 수 있지만..
개발 버전 관리 버전의 정의 효율적으로 상품을 관리하기 위한 목적으로 소프트웨어, 하드웨어 상품의 개발 단계 또는 순서를 번호로 표시한 것으로 버전에 따라 내용과 기능에 차이가 있으므로 명확하게 표시해야한다. 버전 표기 이점 버전만으로 핫픽스된 이슈, 스팩의 구현을 볼 수 있어서 대략적인 프로젝트의 히스토리를 확인할 수 있으며, 로그 정리에 도움이 된다. *핫픽스(Hotfix)란? 제품 사용 중에 발생하는 버그의 수정이나 취약점 보완, 또는 성능 향상을 위해 긴급히 배포되는 응급 패치 프로그램. *로그(log)란? 로그파일은 운영 체제나 소프트웨어가 실행 중 발생하는 이벤트등의 메세지를 기록한 파일이다. 1.0.0의 '.'의 의미 '.'을 기준으로 3 부분으로 나눌 수 있습니다. major.minor.patch 주(主)..
[React+TypeScript] ShortPolling, LongPolling, SSE, WebSocket 차이점 목표 실시간 알림 서비스를 구현하고자, 어떤 방식이 알림 서비스에 적합한지 알아보고, 실시간 통신 방식에 대해서 학습한다. ShortPolling 특징 - 클라이언트는 일정한 간격(예:1~2초) 으로 HTTP요청을 계속해서 보내는 방법 - 서버에서 업데이트가 없을 경우, 대부분의 요청은 빈응답으로 받는다. 단점 높은 HTTP 오버헤드가 발생한다. 불필요한 네트워크 호출이 발생한다. 실시간 통신 애플리케이션으로 적합하지 않다. HTTP 오버헤드란? - 네트워크를 통해 대상으로 라우팅되는 데이터와 함께 전송되어야하는 정보를 말하며, 올바른 대상에 도달하기 위해 전송중인 데이터에 추가로 보내지는 정보라 보면 된다. 장점 - 정보 전송의 신뢰성을 높일 수 있고 시스템을 안정적으로 운용할 수 있다. 단점 - 작은..
[리액트 공식 문서] Reducer와 Context로 확장하기 Reducer와 Context - Reducer를 사용하면 컴포넌트의 state 업데이트 로직을 통합할 수 있다. - Context를 사용하면 다른 컴포넌트들에 정보를 전달할 수 있다. reducer와 context를 결합하기 - state와 dispatch 함수를 props를 통해 전달하느 대신 context에 넣어서 사용할 수 있는데, 이점은 prop drilling 없이 TaskBoard 아래의 모든 컴포넌트 트리에서 tasks를 읽고 dispatch 함수를 실행 할 수 있다. Reducer와 context 결합 방법 1. context를 생성한다. 2. state과 dispatch 함수를 context에 넣는다. 3. 트리 안에서 context를 사용한다. Step1: Context 생성하기 - ..
[리액트 공식 문서] context로 데이터 깊숙이 전달하기 context를 사용할 때 - 정보를 전달 할 때, 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달하는데, 중간에 여러 컴포넌트를 거쳐야할 때가 있는데, context를 이용하면 깊이 여부와 무관하게 아래 트리의 모든 컴포넌트에서 일부 정보룰 사용할 수 있다. props 전달의 문제 - 트리 깊숙이 prop을 전달해야 하거나 많은 컴포넌트에 동일한 prop이 필요한 경우 prop 전달이 장황하고 불편해질 수 있다. - 만약 최상위 컴포넌트와 멀리 떨어져있다면, state를 높이 끌어올리다보면 prop drilling이라는 상황이 발생한다. Context: props 전달의 대안 context를 생성합니다. 데이터가 필요한 컴포넌트에서 해당 context를 사용합니다. 데이터를 ..
[리액트 공식 문서] state 로직을 reducer로 추출하기 reducer를 쓰는 경우 - 여러 개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트는 과부하가 걸릴 수 있는데, 이 경우에 reducer라고 하는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합할 수 있다. reducer로 state 로직 통합하기 - 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 다양한 경우를 한눈에 파악하기 어려워진다. (삭제, 추가 , 수정) - 컴포넌트가 커질수록 여기저기 흩어져 있는 state로직의 양도 늘어난다. - 복잡성을 줄이고 모든 로직을 접근하기 쉽게 한 곳에 모으려면, state 로직을 컴포넌트 외부의 reducer라고 하는 단일 함수로 옮긴다. useState에서 useReducer로 마이그레이션하는 방법 1...
[리액트 공식 문서] Quick start~ Thinking in React 컴포넌트 React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다. export default 키워드는 파일의 주요 컴포넌트를 지정합니다 ... 또는 빈 ... 래퍼와 같이 하나의 공유 부모로 감싸야 합니다. 과 같은 태그를 닫아야 합니다. 데이터 표시하기 중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 JavaScript로 “이스케이프”할 수 있습니다. return ( {user.name} ); return ( ); JSX 중괄호 안에 문자열 연결과 같이 더 복잡한 표현식을 넣을 수도 있습니다: style={{}}은 특별한 구문이 아니라 style={ } JSX 중괄호 안에 있는 일반 {} 객체입니다. 조건부 렌더링 if문을 사용할 수..