프론트엔드/React38 useState의 동작 원리 최종 수정: 2025.06.04useState의 동작 원리■ 클로저와 상태 보존useState가 상태를 보존하는 방식은 클로저와 React의 메모리 관리를 통해 이루어진다. 하지만 일반적인 클로저와는 다른 방식으로 작동한다. 일반적인 클로저 예시function createCounter() { let count = 0; // 외부 함수의 지역 변수 return function() { count++; // 클로저로 count에 접근 return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2console.log(counter()); // 3// count 변수는.. 2025. 6. 4. 리액트에서 상태관리를 하는 이유 최종 수정: 2025.06.04리액트에서 상태관리를 하는 이유 React는 기본적으로 컴포넌트 기반 아키텍처를 따르며, 각 컴포넌트는 자체적인 상태를 가질 수 있다. 그러나 애플리케이션이 커지고 복잡해질수록 여러 컴포넌트 간에 데이터를 공유하고 동기화해야 하는 필요성이 증가한다. 단순한 부모-자식 관계에서는 props를 통해 데이터를 전달할 수 있지만, 깊게 중첩된 컴포넌트 구조에서는 prop drilling이 발생하여 중간 컴포넌트에서는 실제로 사용하지 않는 데이터를 단순히 전달하기 위해 받아야 하는 상황이 발생한다. 이러한 문제를 해결하기 위해 상태관리 라이브러리나 패턴을 사용한다. 이는 애플리케이션의 상태를 중앙 집중적으로 관리해 어떤 컴포넌트든지 필요한 데이터에 직접 접근할 수 있게 해준다. 상태.. 2025. 6. 4. 리액트에서 배열을 렌더링할 때 key를 사용해야 하는 이유 최종 수정: 2025.06.04리액트에서 배열을 렌더링할 때 key를 사용해야 하는 이유Virtual DOM의 재조정 과정과 관련이 있다.key는 React가 '어떤 컴포넌트의 어떤 데이터를 나타내는지' 정확히 알 수 있게 해주는 힌트 역할을 한다.■ Virtual DOM 재조정 과정React는 상태가 변경될 때 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교해서 실제 DOM에 최소한의 변경만 적용한다. 이때 배열의 각 요소를 구분하기 위해 key가 필요하다.// ❌ key 없는 경우function TodoList({ todos }) { return ( {todos.map(todo => ( {todo.text} // key 없음 ))} .. 2025. 6. 4. DOM / Virtual DOM / 파이버(Fiber) 최종 수정 : 2025-05-271. DOM가상 DOM을 이해하기 위해서는 DOM에 대한 이해가 필요하다. DOM(Document Object Model)은 객체로, 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 이 문서 구조는 XML이나 HTML로 작성돼 있다. 웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 그러나 DOM은 동적 UI에 최적화되어 있지 않다는 치명적인 단점이 있다. 예를 들어, 스크롤을 내릴 때마다 새로 생기는 웹 페이지나 버튼을 클릭했을 때 나타나는 이미지나 글자 등, 이처럼 규모가 큰 웹 애플리케이션에서 DO.. 2025. 5. 27. 리액트의 기본 3요소 (Virtual DOM, JSX, 컴포넌트) 최종 수정 : 2025-05-27리액트의 기본 3요소■ Virtual DOM1. 패키지리액트 프로젝트는 항상 react와 react-dom 패키지가 필요하다.react : 리액트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공한다.react-dom/client 등의 렌더러 : 앱이 동작하는 환경(플랫폼)에 종속적인 기능을 제공하는 데 특화된 패키지CSR(client-side rendering) 방식으로 동작하는 앱 : react와 react-dom/client 패키지 조합SSR(server-side rendering) 방식으로 동작하는 앱 : react와 react-dom/server 패키지 조합 react와 렌더러 패키지의 경계에는 가상 DOM이라는 메커니즘이 자리 잡고 있다. 가상 DOM.. 2025. 5. 27. 이전 1 2 3 4 ··· 8 다음
