Javascript/ReactJs (2) 썸네일형 리스트형 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.. 이전 1 다음