다시 기초 강의부터 봐봅시다. 5년전 강의인데 봐도 될 지 모르겠지만 일단 봅니다..!
실제 DOM을 직접 처리하는건 사실 성능도 느리고, 비효율적이고 관리하기가 힘듭니다.
사실 간단한 처리는 상관없는데, 처리할 데이터가 많아지면 관리하기도 힘들어집니다.
반면 버츄얼 DOM은 이걸 추상화 시킨 것으로써, 그냥 자바스크립트 객체에 불과합니다. 그 안에서 처리를 하는건 이미 랜더링된 HTML을 실제 DOM API로 처리하는 것보다 빠릅니다.
예를 들어서 이런 데이터 세트가 주어지고, 값이 업데이트 될 때마다. 유저 인터페이스를 업데이트 해야한다고 생각해 보세요.
{
name: "velopert",
point: 100,
eyeColor: black,
nation: "ROK"
}이를 구현하려면 각 값이 업데이트 될 때마다 HTML의 어떤 요소를 수정해야할지 정해야하고, 또 바뀐 값만 업데이트 하기 위해 기존 값과 일일히 대조를 해봐야합니다. 위 코드와 같이 간단한 코드는 괜찮은데 그런데 어플리케이션의 규모가 커지면 관리하기 힘듭니다. 코드도 굉장히 길어지고요. 그런데 리액트는 이런 과정을 굉장히 편하게 해줍니다.
주석을 작성할 때는 컴포넌트 안에서 작성이 되어야 한다.
props
- 컴포넌트 내부의 변하지 않는 데이터를 처리할 때 사용됩니다.
import ReactDOM from 'react-dom';react-dom이 리액트와 브라우저 DOM이랑 연결시켜주는 역활을 한다고 합니다.
ReactDOM.render(element, container[, callback])Strict 모드
애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
Fragment와 같이 UI를 랜더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
❗️주의 : Strict모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
JSX 소개
const element = <h1>Hello, world!</h1>;위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. 자바스크립트를 확장한 문법입니다.
이벤트란? 어떤 사건이 일어났을 때
이벤트 핸들러를 사용해서 어떤 이벤트를 일어나게 해달라. 이게 이벤트 핸들링
이벤트 처리하는 방법 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
<button onClick={activateLasers}>
Activate Lasers
</button>{ }를 꼭 써줘야합니다.
