Virtual DOM 상대적으로 무거운 DOM에 비하여 React의 가상 DOM 객체는 실제 DOM 객체와 동일한 속성을 가지고 있음에도 “훨씬 가벼운 사본”이라고 표현할 수 있다 React는 새로운 요소가 UI에 추가되면 트리 구조로 표현이 되는 가상의 DOM이 만들어지고 요소의 상태가 변경이 되면 다시 새로운 가상의 DOM 트리가 만들어진다 이전의 가상의 DOM과 이후의 가상의 DOM의 차이를 비교 한 뒤 가상의 DOM은 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산한다 실제 DOM은 최소한의 작업만 수행해도 렌더링을 할 수 있게되어 실제 DOM의 업데이트 비용을 줄일 수 있고 더 빠른 렌더링이 가능해진다 const vDom = { tagName: "html", children: [ { t..

기존 리액트는 한 번의 변경으로 수많은 상태 변경 과정이 이뤄져야 하고 이 과정에서 무분별한 렌더링이 일어나게 된다 만약 컴포넌트가 100개 1000개가 된다고 가정하면 관리하기 어렵고 오류가 발생하는 원인이 되며 흐름 자체를 파악하여 어디서 오류가 났는지 조차도 모르는 경우가 생겨난다 Redux 리덕스(Redux)는 리액트에서 가장 사용률이 높은 상태관리 라이브러리이고 컴포넌트들의 상태 로직들이나 글로벌 상태 관리를 손쉽게 해줄 수 있다 state를 쉽게 관리할 수 있고 웹사이트의 상태를 어디서 관리할지 고민하지 않아되며 어떤 액션이 취해졌고, 어떤 데이터가 어떻게 변경되었는지 쉽게 알 수 있다 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르는 방식이다 ..

Props와State는 데이터를 다룰때 사용한다 Props 컴포넌트의 속성(property)을 의미하며 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값을 전달해 주는 것을 의미한다 props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다 function Parent() { return ( 안녕 나는 부모야 {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달하기 */} ); } function Child(props) { return ( {props.text} ); } export default Parent; props.children 사용 import "./styles.css"; const App = () => { con..