[TIL/React] 리액트 엘리먼트, DOM 엘리먼트
2024. 7. 20. 23:40
TIL/React
리액트 엘리먼트JS 객체로, 리액트 컴포넌트가 렌더링 할 내용을 설명한다.가상 DOM에서 관리 되고, 변경 사항을 효율적으로 반영하기 위해 사용한다.리액트의 Virtual DOM (Document Ojbect Model)에 존재하는 엘리먼트는 리액트 엘리먼트가 된다.리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.불변성, 따라서 엘리먼트 생성 후에는 children 이나 attributes를 바꿀 수 없다 -> 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 해야한다. DOM 엘리먼트실제 웹 페이지 구성 요소이다.브라우저가 HTML을 해석해서 만든 객체사용자에게 실제로 보이는 웹 페이지의 구성요소실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM ..
[TIL/React] 리액트 앱의 실행 순서와 컴포넌트
2024. 7. 16. 17:30
TIL/React
리액트 실행 순서`localhost:3000`으로 접속을 요청하면, 리액트 앱 서버는 public 폴더의 `index.html`을 반환함개발자 도구 `Element` 탭에서 태그에 작성된 `script` 태그를 확인한다. 그리고 `bundile.js`를 불러와 실행한다.`bundle.js`는 src 폴더에 있는 `index.js`와 이 파일이 불러온 모듈을 하나로 묶어놓은 파일이기 때문에, `index.js`에 어떤 내용이 있는지 파악해야 리액트 앱의 동작을 제대로 이해할 수 있음`index.js`는 `ReactDOM.createRoot` 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정함`render` 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가하고, 결과적으로 App 컴포넌트가 렌더링 됨..