react의 기초 알아보기 2 (컴퍼넌트, props)

컴퍼넌트

- 리액트 컴포넌트(React component)는 리액트(React) 라이브러리에서 사용되는 재사용 가능한 UI 요소입니다. 리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 개발을 지원합니다.

- 리액트 컴포넌트는 UI를 구성하는 독립적인 모듈로, 각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가지며, 화면에 렌더링되는 UI 조각입니다. 컴포넌트는 재사용 가능하고, 계층 구조로 구성될 수 있어 복잡한 UI를 구성하는 데 유용합니다.

ex 1)

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
    return <h1>Hello, world</h1>
}
const element = <Hello />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

//Hello, world

- import React from "react";는 React 라이브러리를 현재 파일에서 사용하기 위해 가져오는 구문입니다. React는 UI를 구축하는 데 사용되는 주요 라이브러리입니다.
- import ReactDOM from "react-dom/client";는 ReactDOM 라이브러리를 가져오는 구문입니다. ReactDOM은 React 애플리케이션을 실제 DOM에 렌더링하는 데 사용됩니다. react-dom/client는 ReactDOM의 일부 기능을 사용하고자 할 때 사용되는 모듈 경로입니다.
- Hello 함수는 React 컴포넌트를 정의하는 함수입니다. 이 컴포넌트는 <h1>Hello, world</h1>를 반환하며, 화면에 "Hello, world"라는 제목을 표시합니다.
const element = <Hello />;에서는 <Hello />를 변수 element에 저장합니다. 이는 React 요소로서 Hello 컴포넌트를 나타냅니다.
const root = ReactDOM.createRoot(document.getElementById('root'));에서는 'root'라는 id를 가진 DOM 요소를 찾아서 해당 요소에 React 애플리케이션을 렌더링할 준비를 합니다. createRoot 함수를 사용하여 React 루트를 생성합니다.
마지막으로, root.render(element);는 element를 root에 렌더링하는 코드입니다. 이를 통해 Hello 컴포넌트가 'root' DOM 요소에 나타나게 됩니다.

ex 2)

import React from "react";
import ReactDOM from "react-dom/client";
function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}
function App(){
    return (
    <div>
        <Welcome name = "world" />
        <Welcome name = "world2" />
        <Welcome name = "world3" />
    </div>
    )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

//Hello, world
//Hello, world2
//Hello, world3

- 먼저 import React from "react"와 import ReactDOM from "react-dom/client"를 통해 React와 ReactDOM을 가져옵니다.
- 그 다음, Welcome이라는 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 props를 인자로 받아서 <h1> 태그 안에 Hello, {props.name}을 렌더링합니다. 여기서 props.name은 해당 컴포넌트를 사용할 때 전달된 name 속성값을 의미합니다.
- 그 후, App이라는 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 <div> 안에 세 개의 Welcome 컴포넌트를 사용하고 있습니다. 각각의 Welcome 컴포넌트에는 name 속성값으로 "world", "world2", "world3"를 전달하고 있습니다. (두줄이상을 쓰기위에서는 ()안에 넣어 사용할 수 있지만 3줄 이상이 된다면 div로 따로 묶어주어야 합니다.) 따라서 결과적으로는 세 개의 <h1> 태그가 렌더링되어 "Hello, world", "Hello, world2", "Hello, world3"라는 텍스트가 화면에 출력됩니다.
- ReactDOM.createRoot(document.getElementById('root'))를 통해 root라는 Root 엘리먼트를 생성합니다. ReactDOM.createRoot 메서드는 React 18에서 도입된 동시 모드(Concurrent Mode)를 사용하기 위한 메서드입니다.
- 마지막으로, root.render(<App />)를 호출하여 App 컴포넌트를 root에 렌더링합니다. 이로써 컴포넌트 계층 구조가 만들어지고, 최종적으로 DOM에 컴포넌트가 렌더링되어 화면에 나타나게 됩니다.

 

props

- 리액트(React)에서 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 속성(Properties)입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하거나 함수를 전달하여 상호작용하는 데 사용됩니다.

- props는 컴포넌트 함수의 매개변수로 전달되거나, 클래스 컴포넌트에서 this.props를 통해 접근할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트를 사용할 때 JSX 문법을 사용하여 속성을 전달합니다.

 

ex1 )

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name = "world" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

//Hello, world

- 먼저 import React from "react"와 import ReactDOM from "react-dom/client"를 통해 React와 ReactDOM을 가져옵니다.
- 그 다음, Hello이라는 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 props를 인자로 받아서 <h1> 태그 안에 Hello, {props.name}을 렌더링합니다. 여기서 props.name은 해당 컴포넌트를 사용할 때 전달된 name 속성값을 의미합니다.
- 이후, const element = <Hello name="world" />를 사용하여 Hello 컴포넌트를 사용하는 element를 생성합니다. 여기서 name 속성값으로 "world"를 전달하고 있습니다. 따라서 결과적으로 <h1>Hello, world</h1>이 생성됩니다.
- ReactDOM.createRoot(document.getElementById('root'))를 통해 root라는 Root 엘리먼트를 생성합니다.
- 마지막으로, root.render(element)를 호출하여 element를 root에 렌더링합니다. 이로써 컴포넌트가 root에 렌더링되어 화면에 나타나게 됩니다. 화면에는 "Hello, world"라는 텍스트가 출력됩니다.

ex2 )

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 : "world",
  text : "hello",
  author : {
    name : "ding",
    ulr : "tistory.com"
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.ulr} />);

//world
//hello
//ding
//tistory.com

- 먼저 Hello 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 props를 인자로 받아서 div 요소 안에 props로 전달받은 값을 출력합니다. 여기서 props.title1, props.title2, props.title3, props.title4는 각각 name.name, name.text, name.author.name, name.author.ulr 값을 출력합니다.
- 그 다음, name 객체를 만들고 ReactDOM.createRoot를 사용하여 root 엘리먼트를 생성합니다. 이후, root.render 메서드를 사용하여 Hello 컴포넌트를 렌더링합니다. 여기서 Hello 컴포넌트에 name 객체의 속성값들을 props로 전달하고 있습니다.