순수리액트
[React] 리액트 컴포넌트 (클래스 컴포넌트와 함수형 컴포넌트)
🧐 리액트 컴포넌트 리액트에서 위와 같은 각 부분들을 컴포넌트라 합니다. 컴포넌트를 사용하면 서로 다른 데이터 집합에 같은 DOM 구조를 재사용할 수 있어야 합니다. 리액트로 만들고 싶은 UI를 생각할 때, 엘리먼트를 재사용 할 수 있는지 고려해야합니다. 이런 구조를 사용하면 확장성이 증가합니다. 리액트에서 컴포넌트를 만드는 3가지 방법 createClass를 사용하는 방법 ES6 Class를 사용하는 방법 상태가 없는 함수형 컴포넌트를 사용하는 방법 1) React.createClass (createClass를 사용하는 방법) 리액트가 처음 만들어졌을 때의 유일한 방법이었다. 재사용 가능한 리스트를 만들기 위해 아이템들이 들어 있는 배열을 컴포넌트에 프로퍼티를 통해 넘길 수 있다. (예시) const ..
[React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM)
🧐 가상 DOM이란? 실제 DOM에 접근하는 대신, 이를 자바스크립트 객체로 구성해 추상화하여 사용하는 방식입니다. 리액트가 모든 처리를 대신 해주기 때문에 위와 같은 DOM API 조작 작업을 직접 신경 쓸 필요가 없습니다. 대신 가상 DOM을 다루거나 리액트가 UI를 생성하고 브라우저와 상호작용하기 위해 사용하는 몇 가지 명령만 다루면 됩니다. 🧐 React Element (리액트 엘리먼트) 가상 DOM은 리액트 엘리먼트로 이루어져 있습니다. 또한 브라우저 DOM은 DOM 엘리먼트로 이루어져있습니다. 이 때, 리액트 앨리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야하는지 기술해줍니다. (리액트 엘리먼트 -> DOM 엘리먼트) 리액트 엘리먼트 ( React.createElement를 사용해..