React

리액트 라이프 사이클 리액트의 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프 사이클이라고도 한다. 리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 하거나, 컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있는데, 이때 리액트 컴포넌트 라이프 사이클 관련 함수들을 이용하면 이를 처리할 수 있다. 아래 표 내부 단계에 따라 다양한 종류의 라이프 사이클 함수가 있다는 것을 확인할 수 있다. 컴포넌트 라이프 사이클은 크게 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에 패치해준다. 발생하게 된 계기와 함께 다시 ..