리액트 공부하기

import React from "react";
import ReactDOM from "react-dom/client";


function Hello(props){
  return (
    <div>
      <div>{props.title1}</div>
      <div>{props.title2}</div>
      <div>{props.title3}</div>
      <div>{props.title4}</div>
    </div>
  );
}

const name = {
  name : "JIN",
  text : "hello",
  author : {
    name : "baby",
    url : "naver.com"
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.url}/>);

이 코드는 React를 사용하여 "Hello" 컴포넌트를 정의하고, 해당 컴포넌트를 렌더링하는 방법을 보여줍니다.

컴포넌트는 React 함수 컴포넌트로 정의되며, props라는 이름의 매개변수를 사용합니다. 이 컴포넌트는 props 객체에서 title1, title2, title3, title4 프로퍼티를 가져와서 해당 값을 렌더링합니다.

그리고 name 객체는 컴포넌트에 전달되며, name 객체의 프로퍼티를 title1, title2, title3, title4에 각각 전달합니다.

마지막으로, ReactDOM.createRoot를 사용하여 루트 React 컴포넌트를 생성하고, render 메서드를 호출하여 Hello 컴포넌트를 렌더링합니다. Hello 컴포넌트는 title1, title2, title3, title4의 값으로 렌더링되므로, 화면에는 "JIN", "hello", "baby", "naver.com" 이 출력됩니다.

 

import React from 'react'
import ReactDOM from 'react-dom';

function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name='Jinyong'/>;

ReactDOM.render(element, document.getElementById("root"));

export default Hello

이 코드는 React를 사용하여 "Hello" 컴포넌트를 정의하고, 해당 컴포넌트를 렌더링하는 방법을 보여줍니다.

Hello 컴포넌트는 props라는 이름의 매개변수를 사용하여 "name"이라는 속성을 전달받습니다. 이 컴포넌트는 props.name 값을 사용하여 "Hello, Jinyong"이라는 텍스트를 반환합니다.

const element = <Hello name='Jinyong'/>은 Hello 컴포넌트를 호출하고, name 속성에 "Jinyong" 값을 전달하여 리액트 요소를 생성하는 방법입니다.

마지막으로 ReactDOM.render(element, document.getElementById("root"))를 호출하여 생성된 리액트 요소를 브라우저의 "root" DOM 요소에 렌더링합니다.

이 모듈에서는 Hello 컴포넌트를 내보내는 export default Hello 구문도 포함되어 있습니다. 이렇게 내보낸 컴포넌트는 다른 모듈에서 import 구문을 사용하여 가져와 사용할 수 있습니다.