react

개요 디자인 시안이 변경되면 추가되거나 다른 UI지만 같은 데이터 로직을 가진 컴포넌트를 만드는 경우가 발생한다. 이럴 때 매번 새로운 컴포넌트를 만들어야 했던 귀찮은 일이 생긴다. 위와 같은 이유가 발생하는 이유는 해당 컴포넌트에 두 가지 관심사가 존재하는 문제를 잘 분리하지 못했기 때문이다. 컴포넌트를 Headless하게 만들어서 이를 해결할 수 있다. 하나의 컴포넌트에 두 가지 관심사가 존재하는 문제를 Headless하게 만들어 보자. Headless가 뭘까? 우선 Headless가 무엇일까? 말 그대로 머리(Head)가 없는 것을 의미한다. 보통 Head는 컨텐츠를 보여주는 방법을 의미하고, Body는 컨텐츠 자체를 의미한다. React에서 Head는 UI 즉, 컨텐츠를 보여주는 방법, 컴포넌트가..

💡 함수형 컴포넌트가 도입된 지 시간이 꽤 흘러서 실무에서도 클래스형보다 함수형을 더 많이 쓰고 있다고 합니다. React 공식문서에도 함수형을 쓸 것을 권고하고 있습니다. 하지만 회사의 오래된 heritage로 클래스형 컴포넌트를 마주칠 수 있는 상황도 있을 수 있으니 이를 대비하여 사전(?) 지식으로서 짧게 알아보는 시간을 가졌습니다. 1. LifeCycle 리액트의 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터 사라질 때까지의 생명주기를 뜻합니다. 리액트 컴포넌트는 [Mount] -> [Update] -> [Unmount] 의 과정을 거칩니다. mount는 생성될 때, update는 업데이트될 때, unmount는 제거될 때를 뜻합니다. 라이프 사이클 메서드의 종류는 총 10가지 입니다. w..

💡 지난 주에 Virtual Dom과 함께 렌더링, Props, State에 대해 알아봤었다. => 🔗링크 이번에는 리엑트의 재렌더링 조건 & 렌더링 성능 최적화에 대해서 다루고자 한다. 재렌더링 조건을 알아야 DOM에서 가장 비싼 작업인 Painting 과정을 줄이는, 즉, 렌더링 최적화에 신경을 쓸 수 있기 때문에 짧지만 알고 있어야 하는 중요한 개념이라고 볼 수 있다. 1. 리액트 재렌더링 조건 State (상태) 변경이 있을 때 새로운 props가 들어올 때 기존 props가 업데이트 됐을 때 부모 컴포넌트에서 받은 props의 참조값이 변경되면 그 props 를 받고 있던 자식 컴포넌트도 재렌더링 된다. 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 재렌더링 되면 부모 컴포넌트에 속해있는 자식..

💡 이전에는 그냥 '그렇구나.' 하면서 넘어갔던 DOM과 Virtual DOM의 개념적인 측면에서 접근하며 알아보면서 왜 Virtual DOM이 등장했는지 좀 더 깊게 알아볼 수 있는 시간이었습니다. 💡 불변성에 대해 이해하기 위해 기본형 데이터와 참조형 데이터를 다시 한 번 곱씹어 볼 수 있는 시간을 가졌습니다. 1. DOM 과 Virtual DOM(가상 DOM) DOM 에 대한 간단한 설명 후 Virtual Dom 이 왜 필요한지, 그리고 props와 state에 대해 얘기하고자 한다. 1.1 DOM ⚪ 먼저, 렌더링에 대해서 말하고자 한다. 렌더링이라는 것은 브라우저가 클라이언트가 시각적으로 볼 수 있도록 화면에 출력하는 단계를 의미한다. 이 렌더링이 가능하도록 브라우저는 기본적으로 렌더링 엔진이라..