리액트

React에서 상태(State)란, 컴포넌트 내에 관리되는 변수 즉, 변하는 데이터를 의미한다. 서비스의 규모가 커질수록 관리해야 할 상태(State)가 많아지고 Prop Drilling이라는 현상이 발생된다. Prop Drilling이란, 하위 컴포넌트로 데이터를 전달하는 과정에서 컴포넌트의 트리 구조 상 중간 과정에 있는 컴포넌트를 거쳐 프로퍼티를 내려주는 것을 의미한다. 중간 과정에 있는 컴포넌트는 전달을 위해 불필요하게 복잡성을 증대시키거나, 프로퍼티 누락 및 변경 복잡성 등 불편함을 야기한다. 이를 체계적이고 효율적으로 관리하기 위해 상태 관리 라이브러리를 사용한다. Redux, MobX, Zustand, Recoil, Jotai 등 다양한 라이브러리가 존재하는데 상태 관리 패턴은 크게 3가지로..

CSS-in-JS CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다. 👍 장점 지역 스코프 스타일 일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기 쉽다. 하지만 CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다. 코로케이션 일반 CSS를 이용할 경우 모든 리액트 컴포넌트가 src/components 에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다. 사용되지 않는 스타일을 쉽게 구분할 수 없어서 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다. ..

리액트 라이프 사이클 리액트의 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프 사이클이라고도 한다. 리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 하거나, 컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있는데, 이때 리액트 컴포넌트 라이프 사이클 관련 함수들을 이용하면 이를 처리할 수 있다. 아래 표 내부 단계에 따라 다양한 종류의 라이프 사이클 함수가 있다는 것을 확인할 수 있다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount로 나뉜다. 1. 마운트(Mount) 마운트는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 이때 호출되는 함수는 아래와 같다. constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되..

Key 리액트의 key는 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분 데이터의 id를 key로 사용한다. const todoItems = todos.map((todo) => {todo.text} ); 렌더링한 항목에 대한 안정적 id가 없을 경우, 항목의 인덱스를 key로 사용하기도 하나 권장되지 않는다..

Virtual DOM Virtual DOM이란 말그대로 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로, UI의 가상적 표현을 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 이러한 과정을 재조정(Reconciliation)이라고 한다. 사용자 인터페이스를 나타내는 자바스크립트 객체의 형태이고, 브라우저에서 DOM을 보여주는 일반적인 방식보다 속도가 훨씬 빠르게 구현해준다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링한다. 그 다음 실제 브라우저에 보여지고 있는 DOM과 비교하여 차이 있는 곳을 감지해 실제 DOM에 패치해준다. 발생하게 된 계기와 함께 다시 ..