리액트(2)
-
React Component
class 로 정의 class ClassComponent extends React.Component { render() { return Hello } } → 선언한 리액트의 컴포넌트가 있는데, 그 컴포넌트를 상속받아서 구현한다는 뜻이다. ReactDOM.render( , document.querySelector('#root') ); → 리액트 라이브러리 페이지에서 다룬 것 처럼, ReactDOM.render 의 첫번째에는 표시할 내용 , 두번째에는 그 내용을 담을 곳 이다. id가 root 인 곳에 위에서 선언한 ClassComponent 의 return 값을 넣는다. function 키워드를 이용하여 컴포넌트 정의 function FunctionComponent() { return Hello; } Re..
2023.06.16 -
[React] 리액트 라이브러리 (리액트 이전의 프론트엔드)
import ReactDOM from 'react-dom' // 리액트 컴포넌트 => htmlelement 연결하기 import React from 'react'; // 리액트 컴포넌트 만들기 ReactDOM.render( . document.getElementById('hello-example') //이걸 통해서 얻어온 html 앨리먼트(실제 DOM) 에 이 컴포넌트를 그려라 라는 의미 ); class HelloMessage extends React.Component { //리액트 컴포넌트 render() { return ( Hello {this.props.name} ); } } ReactDOM.render 어떤 컴포넌트를 실제로 웹에 표현하기 위해선 실제 어던 HTML 앨리먼트에 이 컴포넌트를 그리라..
2023.06.16