구리

React 상태 관리 라이브러리에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다!Redux가 나온 이유Redux는 JS 상태관리 라이브러리로 전역 상태 관리시 Redux를 쉽게 사용할 수 있는 Redux Toolkit을 많이 사용한다. 그렇다면 Redux 탄생 이전에는 클라이언트 상태 관리를 어떻게 했을까?전역 상태 관리를 생각하면 React가 제공하는 Context API를 떠올릴 수 있지만 이는 16.3 버전으로 2018년에 출시되었다. (엄밀히 말하면 상태 관리보다는 상태 주입을 도와주는 역할이다.) 그 전까지는, React에서 대표적인 상태 관리 라이브러리는 없었다.기존에는 MVC 패턴을 주로 사용했는데 애플리케이션이 비대해지며 상태(데이터)도 많아짐에 따라 상태 변화를 추적하고 이해..

React 리렌더링 성능 개선 경험을 공유하는 글로 피드백은 언제나 환영입니다!서론회사에서 작업했던 영상 데이터를 차트로 보여주는 React 기반의 대시보드 프로젝트를 진행했었다. 프로젝트를 진행하며 성능 개선은 크게 신경쓰지 않았었기에 프로젝트 성능을 분석하고 일부 개선한 경험을 공유하려 한다.본론성능이 느리다는 기준이 뭘까?사용자의 상호작용을 통해 React는 상태가 업데이트되면 리렌더링이 되면서 화면이 다시 그려진다. 그런데 리렌더링 속도가 느려지면 사용자 경험도 낮아지기에 렌더링 속도가 성능의 기준이 될 것이다. 그렇다면 렌더링 속도가 느리다는 기준은 무엇일까?여러 자료들을 찾아보며 내린 결론은 다음과 같다.상호작용에 대한 응답 : 100ms이하로 응답해야 한다.애니메이션 : 각 프레임당 16ms..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useMemo과 useCallbackuseMemo는 리렌더링 사이에 계산 결과를 캐싱(메모이제이션)할 수 있게 해주는 React Hook으로 React는 초기 렌더링 중에 calculateValue 함수를 호출한다. 그리고 마지막 렌더링 이후 deps가 변경되지 않았을 경우 저장된 값을 반환하거나 변경되었다면 calculateValue를 다시 호출해서 반환된 값을 저장하고 반환한다. 참고로 React는 캐싱된 값을 특별한 이유가 없는 한 버리지 않는다.const cachedValue = useMemo(calculateValue, dependencies)// examplefunction TodoList({ todos, tab ..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useEffect란?공식 문서에 따르면 useEffect란 렌더링 후 특정 코드를 실행해 외부 시스템과 컴포넌트를 동기화하는 hook이라고 한다. effect를 사용해 렌더링 후 특정 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다고 하는데 여기서 effect는 무엇을 의미할까?Effect란 무엇일까?렌더링 자체에 의해 발생하는 부수효과 (side effect)를 의미한다. 리액트의 함수형 컴포넌트는 props, state를 바탕으로 컴포넌트를 렌더링 하는데 컴포넌트의 렌더링과 무관한 연산들이 존재한다면 이것이 side effect가 되는 것이다.무관한 연산을 컴포넌트 내에서 직접 수행하는 것은 좋지 않..

React 동작원리에 대해 공부한 것을 정리한 글입니다. 피드백은 언제나 환영입니다!서론프론트엔드 역사 (React를 곁들인)2000년대까지는 LAMP 스택(Linux, Apache 웹서버, MySQL, PHP)이 강세였으며 웹 서버에서 HTML 페이지를 만들어 클라이언트에게 제공하는 방식으로 브라우저는 단순히 HTML 페이지 렌더링, JS는 폼 처리와 같은 부수적인 역할만 하는 방식으로 프론트엔드는 수동적인 역할이었다.2010년대부터는 웹소켓, 캔버스, 지오로케이션 같은 다양한 기능을 브라우저에서 제공하며 JS의 역할은 더욱 넓어졌다. 그러나 DOM API를 다루는 것은 까다로웠기에 JS 코드가 복잡해지게 되었다.간단한 예시로 DOM을 선택하는 방법에 대해 살펴보면 다음과 같다.ID 선택자를 활용하는 ..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useState서론Hook은 함수형 컴포넌트가 상태를 사용하거나 클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 다양한 작업을 하기 위해 추가되었다.Hook은 클래스형 컴포넌트에서만 가능했던 state, ref 등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고, 클래스형 컴포넌트보다 간결하게 작성할 수 있다는 장점이 있다.그러면 useState Hook에 대해 알아보자.본론useState란?const [state, setState] = useState(initialState)컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 폼에 입력하면 입력 필드가 업데이트되어야 하고, 이미지 캐러셀에서 ..

변경에 유연한 컴포넌트를 만들기 위한 방법 중 하나인 Headless 컴포넌트에 대해 정리한 글입니다.목차서론컴포넌트란프론트엔드 관점에서 컴포넌트란본론컴포넌트를 잘 만들어야 하는 이유Headless 컴포넌트Headless 컴포넌트가 필요한 이유Headless 컴포넌트 설계 방법Headless 컴포넌트로 리팩토링하기1. Compound Component2. Function as Children Component3. Custom HookHeadless 컴포넌트 장단점 Headless UI 라이브러리가 무조건 정답인가? 결론컴포넌트란일반적으로 기능적 단위로 각각의 독립된 모듈을 의미하며 프론트엔드 관점에서는 화면을 구성하는 UI 요소다.모듈일반적으로 프로그램을 구성하는 요소로 관련 데이터와 함수를 하나로 묶은..

회사에서 개발중인 CRA 기반의 React 프로젝트를 Docker 이미지로 빌드시 npm run build 명령어를 통한 빌드 시간이 너무 오래 걸려 이를 개선한 과정을 작성한 글입니다. 프로젝트를 그냥 빌드하면 1분 50초정도 걸리지만 Docker 이미지로 빌드시 빌드시간이 약 6분정도로 3배가량 차이가 났습니다. 그래서 Webpack을 커스텀해 빌드 시간 자체를 줄이면 Docker 이미지 빌드 시간도 줄일 수 있지 않을까 싶어 빌드 과정을 개선해보겠습니다. 내용이 길어질 것 같아 2개의 글로 나눠 이번 포스팅은 모듈 번들러, Webpack이란 무엇이고 왜 쓰는지에 대해 알아보겠습니다. 사전 지식 CRA React 빌드 과정 모듈 시스템 본론 모듈 번들러 트랜스파일러 Webpack Create Reac..