ReactJS
-
[React] 리액트 Virtual DOMReactJS 2022. 11. 30. 23:24
1. DOM이란 ? “DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다. ex. element, 문자열, 혹은 코멘트” -MDN- 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 문서를 노드와 객체로 나타냅니다. 위 사진을 보고 HTML이 DOM이라고 생각할 수 있지만 그렇지는 않습니다. IDE에서 작성한 HTML은 DOM이 아니고 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM입니다. 이렇게 하는 이유는 프로그래밍 언어가 페이지와 상호 작용할 수 있게 하기 위해서 입니다. DOM..
-
[React] 컴포넌트와 렌더링ReactJS 2022. 11. 30. 22:41
Component란? 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 리액트에서 개발하는 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려줍니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요합니다. 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 그렇다면 기존 명령형 프로그..
-
[React] ref란? (feat. DOM API를 쓰면 안되는 이유)ReactJS 2022. 11. 30. 19:08
ref란? HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용한다. 예를 들어 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등 이 있다. 왜 DOM API를 쓰면 안될까? document.getElementsByClassName과 같은 자바스크립트 문법을 쓰는 것..
-
[ReactJS] useEffect, CleanupReactJS 2022. 10. 7. 18:48
state가 바뀌면 자동으로 변경된 새로운 값을 가지고 모든 컨포넌트가 처음부터 다시 실행된다. 그런데 이게 괜찮을 때도 있지만 대부분의 경우 API로 데이터를 불러오는 코드가 있게 되면 state가 바뀔 때마다 계속 API로 데이터를 불러오게 되어 매우 비효율적이게 된다. 이를 막기 위해선 useEffect를 사용해야한다. useEffect에는 두가지 argument가 필요한데, 첫번째는 실행할 구문이 들어가면 되고, 두번째로는 무엇이 변화할 때 첫번쩨 인자인 구문을 실행할지를 정하는 dependency가 들어가면 된다. 즉 다음의 예시에서 두번째 useEffect는 해당 구문이 맨 처음 render할 때 실행되고,또 keyword가 변화할 때 실행된다고 생각하면 된다. 첫번째 예시의 경우 depend..
-
-