리액트 기초 맛보기!

리액트 기초

React에서 컴포넌트(Component)는 UI를 구성하는 독립적인 모듈입니다. 간단히 말해, 컴포넌트는 재사용 가능한 UI 요소입니다. 예를 들어, 로그인 폼, 메인 메뉴, 모달 팝업 등의 UI 요소를 각각 컴포넌트로 만들어서 필요한 곳에서 사용할 수 있습니다.

React에서 컴포넌트는 JavaScript 클래스나 함수로 정의됩니다. 컴포넌트는 하나 이상의 다른 컴포넌트나 HTML 요소를 포함할 수 있으며, 이를 통해 복잡한 UI를 쉽게 만들 수 있습니다.

리액트에서 컴포넌트의 이름은 대문자로 시작해야 합니다. 이렇게 하면 JSX에서 컴포넌트와 HTML 요소를 쉽게 구분할 수 있기 때문입니다. 예를 들어, <MyComponent />는 MyComponent 컴포넌트를 나타내고, <div>는 HTML의 div 요소를 나타냅니다.

 

 

 

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

function Hello(){
    return <h1>Hello, kimdoyun</h1>
}
const element = <Hello />

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

export default Hello;

코드 설명

import 문: React와 ReactDOM 모듈을 가져옵니다.
Hello 함수: 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 "Hello, kimdoyun" 이라는 문구를 h1 태그로 감싸서 반환합니다.
element 변수: <Hello /> 문법을 사용하여 Hello 컴포넌트를 생성합니다. 이렇게 생성된 컴포넌트를 element 변수에 할당합니다.
ReactDOM.render() 함수: React를 사용하여 실제 DOM에 컴포넌트를 렌더링합니다. 이 함수는 element 변수에 저장된 컴포넌트를 document.getElementById("root")에 해당하는 DOM 요소에 렌더링합니다.
export 문: Hello 컴포넌트를 내보냅니다.
즉, 이 코드는 "Hello, kimdoyun"이라는 문구를 h1 태그로 감싼 컴포넌트를 정의하고, 이 컴포넌트를 root DOM 요소에 렌더링합니다. 이때, 컴포넌트의 이름은 Hello이며, 이를 다른 파일에서도 사용할 수 있도록 내보냅니다.

 

 

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 = "kim" />
        <Welcome name = "kimdo" />
        <Welcome name = "kimdohyun" />
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

코드 설명

import 문: React와 ReactDOM 모듈을 가져옵니다.
Welcome 함수: 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 props를 인자로 받아서 "Hello, {props.name}"이라는 문구를 h1 태그로 감싸서 반환합니다. 이때, props의 name 속성값이 출력됩니다.
App 함수: 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 <div> 태그로 감싸여진 세 개의 Welcome 컴포넌트를 반환합니다. 이때, name 속성값으로 각각 "kim", "kimdo", "kimdohyun"이 전달됩니다.
ReactDOM.createRoot() 함수: React 18에서 도입된 Root API를 사용하여 root React 컴포넌트를 생성합니다. 이 함수는 document.getElementById("root")에 해당하는 DOM 요소를 기반으로 React root를 생성합니다.
root.render() 함수: App 컴포넌트를 root React 컴포넌트에 렌더링합니다. 이때, Welcome 컴포넌트들도 함께 렌더링됩니다.
즉, 이 코드는 세 개의 Welcome 컴포넌트를 감싸는 App 컴포넌트를 정의하고, 이를 root React 컴포넌트에 렌더링합니다. 이때, 컴포넌트의 props로 각각 "kim", "kimdo", "kimdohyun"이 전달되며, 이를 출력하는 h1 태그가 생성됩니다. 이때, ReactDOM.createRoot() 함수를 사용하여 root React 컴포넌트를 생성하였습니다.

 

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 : "kimdohyun",
  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} />);

코드 설명

Hello 컴포넌트는 props를 인자로 받아서 title1, title2, title3, title4의 속성 값을 각각 출력하는 컴포넌트입니다. JSX 문법을 사용하여 DOM 요소를 생성하고, props의 값을 출력하도록 작성되었습니다.

그리고, name이라는 객체를 생성하여, Hello 컴포넌트에 전달되는 props 값으로 사용됩니다. name 객체는 name, text, author 속성을 가지고 있으며, author 속성은 또 다시 name과 url 속성을 가지고 있는 중첩된 객체입니다.

마지막으로, ReactDOM.createRoot() 함수를 사용하여 root라는 변수에 React root 컴포넌트를 할당하고, root.render() 함수를 사용하여 Hello 컴포넌트를 렌더링합니다. 이때, name 객체의 속성 값을 title1, title2, title3, title4의 값으로 전달합니다. 렌더링된 결과는 title1에는 "kimdohyun", title2에는 "hello", title3에는 "baby", title4에는 "naver.com"이 출력됩니다.