리액트는 VirtualDom을 사용하여 바뀐 요소들을 브라우저에 표시합니다. 때문에 직접적인 Dom접근은 권장하지 않죠. 리액트에서 사용하는 VirtualDOM에 대해 알아보자 리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.ge blog.doyeonism.com 위 글을 보면 알 수 있듯이 리액트는 VirtualDom에서 먼저 변경한 후 Dom의 값을 바꿔줍니다. 때문에 VirtualDom에서 값이 변경됐다는 신호를 받아야만 렌더링이 시작된다고 말할 수 있습니다. 직접적으로 Dom을 조작한다면? - VirtualDom에서 값이 변경됐다는 신호가 없었기 ..
리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다. 그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다. 이런 코드를 본 적 있을 것입니다. document.getElementById('test1').innerHTML = 'Hello!'; 위 코드가 의미하는 바는 무엇일까요? 간단하게 말하면 DOM에 접근해 값을 바꾸라는 말입니다. 렌더링이 뭐죠? 브라우저에 내용이 써지는 과정 (feat. DOM,Repain,Reflow) 위 글을 꼭 읽고 DOM을 이해한 후 아래내용을 읽어주세요. 그렇다면 왜 JavaScript기반 프레임워크인 React에선 저런 코드를 본 적이 없을까요? 그 이유는 React에선 VirtualDom을 사용해 변경된 값을 바로 DOM에 적용하..
자바스크립트 기반 라이브러리 리액트에 대해 알아봅시다. 이번 글에선 제가 프로젝트를 할 때 자주 사용하는 리액트에 대해 알아보겠습니다. 리액트는 자바스크립트 기반 라이브러리로서 컴포넌트로 나눠 개발할 수 있는 장점이 있습니다. 더보기 리액 blog.doyeonism.com 저번 시간에 리액트가 무엇인지 간단하게 알아봤습니다. 이번엔 간단한 프로젝트를 만들고 리액트에 대한 이점을 알아가보겠습니다. 리액트를 시작하기 전 소스코드 편집기인 vscode를 먼저 다운로드 하도록 하겠습니다. https://code.visualstudio.com/ 위 홈페이지에서 간단하게 설치할 수 있습니다. vscode는 소스코드 편집 프로그램입니다. 리액트 작업 뿐만 아니라 패키지만 설치한다면 다른 언어도 컴파일할 수 있는 프로..
이번 글에선 제가 프로젝트를 할 때 자주 사용하는 리액트에 대해 알아보겠습니다. 리액트는 자바스크립트 기반 라이브러리로서 컴포넌트로 나눠 개발할 수 있는 장점이 있습니다. 더보기 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5] 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.[6][7] 리액트 (자바스크립트 라이브러리) - 위키백과,..
