Gapus Dev Blog

require 설명 require는 Node.js에서 사용되는 키워드 CommonJS 방식으로 모듈을 가져올 때 사용 주로 서버 사이드 개발에서 많이 사용 동기적으로 모뉼을 가져오며, 가져온 모듈을 변수에 할당하여 사용 예시 const express = require('express'); import 설명 import는 ES6부터 도입된 JavaScript의 표준 문법 브라우저 환경이나 최신 JavaScript 환경에서 사용 비동기적으로 모듈을 가져오며, 가져온 모듈을 변수에 할당하거나 모듈의 특정 멤버를 직접 가져올 수 있다. 예시 import React from 'react'; require과 import의 차이점 require import CommonJS 방식 ES6 모듈 시스템 동기적으로 모듈을 ..

훅(Hook) 설명 함수형 컴포넌트에서 상태(state)와 생명주기 메서드(lifecycle method)를 사용할 수 있게 해주는 기능 클래스형 컴포넌트에서만 상태를 관리하고 생명주기 메서드를 사용할 수 있었지만, 훅을 이용하면 함수형 컴포넌트에서도 동일한 기능을 사용 가능 함수형 컴포넌트 내에서만 사용 가능하며, 훅의 호출 순서는 항상 동일해야 한다. 규칙을 지키면서 훅을 적절하게 사용하면 상태 관리와 생명주기 처리를 간편하게 가능 훅(Hook)의 종류 useState 상태를 관리하는데 사용되는 훅 함수형 컴포넌트 내에서 상태를 생성하고 업데이트를 가능 예를 들어, 숫자나 문자열과 같은 값을 저장하고 업데이트 가능 예시 import React, { useState } from 'react'; cons..

컴포넌트(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에 직접 접근하여 변경하면 ..