props 와 state

props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터고, state 는 컴포넌트 내부에서 변경할 수 있는 데이터이다. (컴포넌트의 상태에 따라 다르게 보여줄 수 있는 데이터) 둘 다 변경이 발생하면 랜더가 다시 일어날 수 있다.

Render() → props와 state 를 바탕으로 컴포넌트를 그리는데,

function 컴포넌트에서 props 정의

function Component(props) {
  return (
    <div>
      <h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
    </div>
    );
  }

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Component message="안녕하세요" />;root.render(element);

class 컴포넌트

class Component extends React.Component {
  render() {
    return (
     <div>
       <h1>
        {this.props.message} 이것은 class로 만든 컴포넌트 입니다.
        </h1>
     </div>
      );
    }
   }

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Component message="안녕하세요" />;root.render(element);

function 컴포넌트와 class 컴포넌트는 동일하다고 볼 수 있다.

 

• ReactDOM 이란
• Javascript 와 연결해서 사용하기 위한 것

ReactDOM.render(
      <Component  message="안녕하세요" />,
      document.querySelector('#root')
    );

document.querySelector('#root') 문서 내에 id 가 root 인 것을 연결해준다. 즉, Component 가 <div id=”root></div> 안에 담긴다.

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Component message="안녕하세요" />;
root.render(element);

하지만 리액트18부턴 ReactDOM 이 아니라 createRoot 를 써야한다.!!!!!!!!!!!!!!!!!!!!