props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터고, state 는 컴포넌트 내부에서 변경할 수 있는 데이터이다. (컴포넌트의 상태에 따라 다르게 보여줄 수 있는 데이터) 둘 다 변경이 발생하면 랜더가 다시 일어날 수 있다. Render() → props와 state 를 바탕으로 컴포넌트를 그리는데, function 컴포넌트에서 props 정의 function Component(props) { return ( {props.message} 이것은 함수로 만든 컴포넌트 입니다. ); } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ;root.render(element); class 컴포넌트 clas..

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..

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 앨리먼트에 이 컴포넌트를 그리라..