Gapus Dev Blog

컴포넌트(Components) 설명 JavaScript 기반의 프론트엔드 라이브러리로, 재사용 가능한 UI 요소인 컴포넌트를 통해 웹 애플리케이션 구축 사용 컴포넌트는 UI를 작은 독립적인 조각으로 분리하여 개발하여 개발을 단순화하고 유지보수성을 향상 리액트 애플리케이션은 여러 개의 컴포넌트로 이루어져 있으며, 각 컴포넌트는 특정한 기능을 수행하고 UI를 표현 자체적으로 상태(state)를 가지고 있을 수 있으며, 이 상태를 기반으로 UI가 업데이트 속성(props)를 통해 외부로부터 데이터를 전달 받을 수 있다. 클래스 컴포넌트와 함수형 컴포넌트로 나눌 수 있다. 사용하는 이유 재사용성 컴포넌트는 독립적인 UI 요소로서, 여러 곳에서 반복적으로 사용 가능 컴포넌트를 재사용함으로써 개발 생산성을 향상 예..

props 설명 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달할 때 사용 읽기 전용 데이터 props는 컴포넌트 내부에서 변경할 수 없으며, 부모 컴포넌트에서 변경된 경우에만 업데이트 자식 컴포넌트에서 props를 사용하여 전달받은 데이터를 화면에 렌더링하거나 다른 작업에 활용 가능 사용하는 상황 데이터 전달 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 할 때 props를 사용 예를 들어, 사용자 이름, 설정값 등을 부모 컴포넌트에서 자식 컴포넌트로 전달할 때 props를 활용 읽기 전용 데이터 props는 읽기 전용이기 때문에, 자식 컴포넌트에서 직접 수정할 수 없는 데이터를 전달할 때 사용 주의할 점 읽기 전용 읽기 전용이므로, 자식 컴포넌트에서 직접 수정하려고 시도하면 에러가 발생 따..

React의 생명 주기 생명 주기의 3가지 단계 1. 마운트(Mount) - 생성 단계 컴포넌트가 생성되어 DOM에 삽입될 때 발생 constructor - 컴포넌트가 생성될 때 호출되는 함수 static getDerivedStateFromProps - props에 변화가 있을 때마다 호출되며, state를 업데이트하는 데 사용 render - 컴포넌트의 UI를 렌더링 componentDidMount - 컴포넌트가 마운트된 직후에 호출, 외부 데이터 가져오기, 이벤트 등록 등의 작업을 수행 2. 업데이트(Update) - 업데이트 단계 컴포넌트의 props나 state가 변경되어 업데이트가 발생할 때 호출 static getDerivedStateFromProps - 마운트 단계와 마찬가지로 props에 ..

가상 DOM (Virtual DOM) 설명 가상 DOM은 React와 같은 라이브러리나 프레임워크에서 사용되는 개념으로, UI의 효율적인 업데이트를 위해 활용 가상 DOM은 실제 DOM의 가벼운 복제본으로, React 컴포넌트의 상태 변화에 따라 가상 DOM이 업데이트 JavaScript 객체로써 메모리에 존재하며, 실제 DOM과는 독립적으로 작동 상태 변화가 발생하면 React는 이전 가상 DOM과 현재 가상 DOM을 비교하여 실제 DOM에 반영해야할 변경 사항을 파악하고, 변경사항이 있는 부분만을 선택적으로 실제 DOM에 반영 가상 DOM을 사용하면 성능 개선과 동시에 개발자가 UI업데이트를 쉽게 관리 가능 필요한 이유 성능 향상 실제 DOM 조작은 비용이 많이 발생 DOM에 직접 접근하여 변경하면 ..

리액트(React) 설명 리액트는 페이스북(현재 메타)에서 개발된 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리 리액트를 사용하면 동적이고 반응형인 웹 애플리케이션 개발 가능 컴포넌트 기반 아키텍처를 사용하여 UI를 작은 조각으로 분할하고, 이를 조합하여 복잡한 UI 구성 가능 배우기 위해 필요한 것 JavaScript 기초 React는 JavaScript 라이브러리로 JavaScript 기본 개념과 문법을 이해하는 것이 중요 변수, 함수, 조건문, 반복문 등의 기본 개념 숙지 HTML 및 CSS 기초 React에서 UI를 개발하기 위해 HTML과 CSS의 기본적인 지식 필요 HTML을 사용하여 컴포넌트 구조를 작성, CSS를 사용하여 스타일링을 할 수 있어야 한다. JSX 문법..

이벤트 캡처링(Event Capturing) 설명 이벤트가 상위 요소에서 하위 요소로 향하는 방향으로 전파되는 것 이벤트가 발생한 요소의 최상위 부모 요소부터 시작하여 이벤트가 발생한 요소까지 이벤트가 전파 addEventListener 메서드의 세 번째 인자를 true로 설정하여 사용, 기본은 false. 이벤트 캡처링을 사용하면 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다. 장점과 단점 장점 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다. 이벤트 전파 경로 상의 중간 요소에서 이벤트를 처리할 수 있으므로, 더 정교한 이벤트 처리 로직 구현 가능 단점 이벤트 캡처링을 사용하면 이벤트 핸들러가 상위 요소부터 호출되므로, 이벤트 핸들러의 실행 순서가 예측..