DOM DOM은 The Document Object Model의 약어로 직역하자면 문서 객체 모델이다. 즉, DOM은 HTML을 객체로 표현한 것이며 외부(JavaScript)와 접속할 인터페이스이다. html로 작성된 코드는 HTML 파서에 의해서 DOM이라는 객체가 모인 트리로 변환된다.(DOM 트리) Virtual DOM React 공식 홈페이지에서 Virtual DOM은 다음과 같이 표현하고 있다. UI로 표현될 객체를 가상 메모리에 저장하고 라이브러리에 의해 실제 DOM으로 동기화 하는 개념 여기서 UI로 표현될 객체는 DOM을 말하며 라이브러리는 VDOM을 랜더링해주는 ReactDOM같은 것을 말한다. Virtual DOM의 이점 React에서 state나 props가 갱신되면 render()..

useReducer 훅이란? useState를 대체할 수 있는 함수이다. React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. (콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있다.) useReducer를 사용하기 위한 구성요소들은 다음과 같다. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init); state : 컴포..

프로퍼티(props) 프로퍼티, props(properties의 줄임말) 라고 한다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름을 갖는다.) 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터다.) 사용방법 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다. 1개의 프로퍼티 넘기기 App 컴포넌트에서 Main컴포넌트에 "name"이라는 이름, "아라짱" 값을 갖고 있는 프로퍼티를 넘기는 예제 ex) App.js (문자열은 큰따옴표(" ")를 사용하여 값을 전달한다.) import React, { Component } from 'react'; import Header from './comp..