-
React #1. 요소 생성과 렌더링프론트/React 2024. 7. 31. 22:29
리액트를 사용하지 않았다면 아래의 코드 처럼 HTML 태그로 UI 를 먼저 만들어야한다. 하지만 이 방식은 앞서 설명한것 처럼 상호작용하기 위해서 요소에 id 나 class 부여하고 이벤트를 걸어줘야하는 번거로움이 있다.
<!DOCTYPE html> <html lang="en"> <body> <div id="root"> <span>Hello World<span> </div> </body> <script> const root = document.querySelector('#root'); const span = document.querySelector('span'); </script> </html>리액트를 사용하면 재사용 가능한 요소인 컴포넌트를 정의할 수 있다. 하지만 번거로운 점이 하나 있는게 span 이라는 컴포넌트를 보여주기 위해서 문서에 컴포넌트를 렌더링해 그려내야하는 번거로움이 있다. 컴포넌트는 항상 대문자로 시작해야한다.
<!DOCTYPE html> <html lang="en"> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <script> const Root = document.getElementById('root'); const Span = React.createElement('span', null, 'Hello World'); ReactDOM.render(Span, Root); </script> </html>React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE (youtube.com)
'프론트 > React' 카테고리의 다른 글
React #6. useEffect 의 사용 목적과 방법 (0) 2024.08.13 React #5. 리액트 컴포넌트와 CSS 모듈화의 장점 (0) 2024.08.05 React #3. 컴포넌트의 prop 전달 (0) 2024.08.04 React #2. 리액트의 컴포넌트 이해하기 (0) 2024.08.03 React #0 바닐라 JS 의 단점과 구조 살펴보기 (0) 2024.07.30