본문 바로가기

전체 글

 (35)
React 리렌더링: 상태 변경, Virtual DOM, 그리고 Diffing 알고리즘 리액트의 핵심 개념 중 하나인 상태 변경, Virtual DOM, Diffing 알고리즘에 대해 알아보겠습니다. 상태(state) 변경과 리렌더링 React는 상태(state)가 변경될 때 해당 상태를 사용하는 컴포넌트를 리렌더링합니다. 즉, 어떤 상태가 변경되었을 때 그 상태를 사용하고 있는 컴포넌트만 다시 그려집니다. 이는 상태가 변경되어도 해당 상태에 의존하지 않는 다른 컴포넌트는 리렌더링 되지 않는다는 것을 의미합니다. Virtual DOM 리렌더링의 효율성을 위해 리액트는 Virtual DOM이라는 개념을 도입했습니다. Virtual DOM은 실제 DOM을 추상화한 개념으로, 상태가 변경될 때마다 전체 UI를 Virtual DOM 상에서 리렌더링합니다. 이는 메모리에 가상으로 존재하는 DOM으로..
JSX(JavaScript XML)란 무엇인가? JSX(JavaScript XML)는 React와 함께 사용되는 UI(User Interface) 컴포넌트를 만들기 위한 JavaScript 확장 문법 입니다. JSX는 XML과 비슷한 문법을 가지며, JavaScript 코드 안에서 HTML과 유사한 구조로 UI 요소를 정의할 수 있게 해줍니다. JSX 문법 JSX 문법은 일반적인 JavaScript와 유사하지만, 몇 가지 차이점이 있습니다. JSX에서는 HTML 태그와 유사한 구조로 컴포넌트를 정의할 수 있으며, 이를 React에서 사용하는 컴포넌트로 변환하여 사용합니다. 간단한 JSX 예시를 살펴보겠습니다: const App = () => { return ( Hello, JSX! This is a JSX component. ); }; 위 코드에서 r..
자바스크립트의 모듈 시스템: 종류와 특징 & Node 에서 사용 법 자바스크립트는 모듈 시스템을 통해 코드를 구성하고 관리할 수 있는 강력한 기능을 제공합니다. 모듈 시스템은 코드를 모듈 단위로 나누어 재사용성과 유지보수성을 향상시킵니다. ES6 Modules: ES6 Modules는 ECMAScript 2015(ES6)에서 공식적으로 도입된 자바스크립트의 모듈 시스템입니다. ES6 Modules는 브라우저와 서버 환경에서 모두 사용할 수 있으며, 정적으로 모듈을 로딩합니다. import와 export 키워드를 사용하여 모듈을 가져오고 내보내는 것이 특징입니다. ES6 Modules는 정적 분석에 의해 모듈의 의존성을 파악하여 필요한 모듈만 로딩하므로 성능상의 이점을 제공합니다. 또한, 브라우저에서도 네이티브로 지원되기 때문에 별도의 번들러 없이도 모듈을 사용할 수 있습..

티스토리툴바