반응형 Front-end (프론트엔드)/React (리액트)4 [프론트엔드] React의 불변성 / 얕은비교 Question : 불변성이 무엇인지 설명하시오 Answer : 리액트에서 불변성(immutability)은 상태를 직접 수정하지 않고, 상태 변경 시 새로운 객체를 생성하는 개념입니다. 이는 성능 최적화와 예측 가능한 상태 관리를 위해 중요합니다. 상태나 props가 변경되면 새로운 객체가 생성되어, 리액트는 얕은 비교(shallow comparison)를 통해 이전 상태와 새로운 상태의 참조값을 비교합니다. 참조값이 다르면 리렌더링을 수행하고, 같으면 생략하여 불필요한 리렌더링을 방지합니다. 불변성을 유지하면 코드의 안정성과 유지보수성이 향상되며, 디버깅이 용이해집니다. Question : React 불변성을 유지해야 하는 이유를 설명하시오 Answer : 리액트에서 불변성을 유지하는 이유는 성.. 2024. 5. 22. [프론트엔드] React hooks / 클래스형 컴포넌트 / 함수형 컴포넌트 Question : React hooks에 대해 설명하시오 Answer : React Hooks는 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들입니다. 대표적인 Hooks에는 useState, useEffect, useContext 등이 있습니다. useState는 상태 변수를 선언하고 관리할 수 있게 해주며, useEffect는 컴포넌트의 사이드 이펙트(side effects)를 처리할 수 있게 합니다. 이를 통해 클래스형 컴포넌트 없이도 상태 관리와 생명주기 메서드를 활용할 수 있어 코드의 가독성과 유지보수성이 향상됩니다. 또한, 커스텀 훅을 만들어 재사용 가능한 로직을 추출하고 공유할 수 있습니다. Hooks는 React 16.8에서 도입.. 2024. 5. 21. [프론트엔드] React - React 특징/ React 사용이유 / React 라이프사이클 Question : React 의 특징을 설명하시오 Answer : 리액트는 1) 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 2) 가상 DOM을 활용하여 성능을 향상시키고 3) 컴포넌트 기반 아키텍처를 채택하여 모듈화 및 재사용성을 높입니다. 4) JSX를 통해 HTML과 JavaScript를 결합하여 컴포넌트를 만들며, 5) 단방향 데이터 흐름 및 상태 관리를 위한 Context API나 Redux와 같은 상태 관리 라이브러리를 제공합니다. 6)생태계가 거대하고 활발하며, 커뮤니티의 지원이 강력합니다. Question : 많은 개발자들이 React를 사용하는 이유를 설명하시오 Answer : 리액트는 성능, 컴포넌트 기반 아키텍처, JSX를 통한 직관적인 UI 작성, 단방.. 2024. 5. 14. [프론트엔드] React - Virtual DOM / Reconciliation / Diffing / key Question : React Virtual DOM 에 대해 설명하시오 Answer : 리액트의 Virtual DOM은 실제 DOM과 동일한 구조를 메모리 상에 가상으로 구현한 것입니다. 이 가상 DOM은 애플리케이션의 UI 상태를 나타내며, 실제 DOM과는 별도로 관리됩니다. 상태 변경 시, 리액트는 가상 DOM과 이전 가상 DOM을 비교(diffing)하여 변경된 부분만을 감지하고, 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 조작을 최소화하고 성능을 향상시킵니다. 이는 특히 대규모 애플리케이션에서 UI 업데이트의 효율성을 높여줍니다. Question : Reconciliation 에 대해 설명하시오 Answer : Reconciliation(재조정)은 React에서 Virtual DO.. 2024. 5. 13. 이전 1 다음 반응형