Frontend/react

[React] 리액트 라이프 사이클

리액트 라이프 사이클 ​ 컴포넌트의 생명 주기 컴포넌트가 렌더링 되기전 ~ 페이지에서 사라질 때 ​ 라이프 사이클을 다루는 것이란? - 컴포넌트가 마운트, 업데이트, 언마운트 되는 일련의 프로세스를 프로그래머가 통제하는 것 - 생성자를 통해 필요한 메모리를 할당, 객체의 역할이 끝나면 소멸자를 통해 메모리를 반환 ​ 라이프 사이클의 유형 1. 생성될 때(마운트) 2. 업데이트될 때(업데이트) 3. 제거할 때(언마운트) ​ ​ - 리액트에서는 예전 방식인 클래스 방식을 사용하는 것을 지양하고 함수 방식을 사용하는 것을 권장 ​ ​ ​ 함수형 라이프사이클에 따른 useEffect 실행 useEffect(() => { console.log('componentDidMount!'); }, []) useEffect..

Virtual DOM

DOM(Document Object Model) 객체로 문서 구조를 표현하는 방법(XML, HTML 등으로 작성) Virtual DOM 리액트의 성능을 향상시키기 위해 고안된 개념 메모리 상에 존재하는 가상의 DOM 브라우저 상에 실제 DOM을 직접 조작하는 것보다 더욱 빠르게 렌더링 가능 Virtual DOM은 실제 DOM과 비슷한 구조를 가지고 있으며, 리액트의 컴포넌트가 렌더링될 때마다 Virtual DOM을 업데이트합니다. 이때, Virtual DOM을 업데이트하는 것은 실제 DOM을 조작하는 것보다 훨씬 빠르며, Virtual DOM을 업데이트할 때마다 리액트는 변경된 부분만 실제 DOM에 반영합니다. Virtual DOM의 장점 효율적인 렌더링: Virtual DOM은 변경된 부분만 실제 DO..