리액트 찬찬히 알아가보자!

오늘은 리액트 기본 문법과 형식들을 알아보겠습니다!

리액트 기본문법

어제에 이어 컴포넌트하는 방법과 props에 대해 알아볼게용~
 

컴포넌트

컴포넌트란?
 
리액트 컴포넌트(React component)는 UI(User Interface)를 만들기 위한 빌딩 블록입니다. 리액트 애플리케이션은 컴포넌트들의 계층적인 구조로 이루어져 있으며, 각 컴포넌트는 자체적인 상태(state)와 속성(props)을 가지고 있습니다.

컴포넌트는 함수형 컴포넌트와 클래스형 컴퍼넌트로 나눌 수 있습니다. 함수형 컴포넌트는 함수로 정의되어 있으며, 입력값(props)을 받아들이고 JSX를 반환합니다. 클래스형 컴포넌트는 클래스로 정의되어 있으며, React.Component를 상속하고 라이프사이클 메서드(lifecycle methods)를 가질 수 있습니다.

컴포넌트는 재사용이 가능하며, 모듈화된 개발을 가능케 합니다. 또한, 리액트에서는 가상 돔(Virtual DOM)을 사용하여 변경된 부분만 업데이트하므로, 컴포넌트의 변경사항이 브라우저에 반영되는 효율적인 렌더링을 구현할 수 있습니다.

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

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

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

export default Hello;

// Hello, YDS

위 코드는 React와 ReactDOM 모듈을 import한 후, Hello 함수형 컴퍼넌트를 정의합니다. Hello 컴퍼넌트는 JSX로 작성된 h1 태그를 반환하며, 컴퍼넌트 내부에 작성된 "Hello, YDS"는 렌더링될 텍스트입니다.

그 후, const element = <Hello />; 코드에서 Hello 컴퍼넌트를 element 변수에 할당합니다.

마지막으로 ReactDOM.render() 메서드를 사용하여 element 변수에 할당된 컴퍼넌트를 실제 DOM 요소에 렌더링합니다. document.getElementById("root")는 렌더링할 DOM 요소를 나타내며, 이 요소에 Hello 컴퍼넌트가 렌더링됩니다.

export default Hello; 코드는 Hello 컴퍼넌트를 다른 파일에서 import하여 사용할 수 있도록 내보냅니다.

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 = "YDS"/>
        <Welcome name = "Yeo Da Seul"/>
        <Welcome name = "JJUL"/>
    </div>
    )
}

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

 

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

function formatDate(date){
    return date.toLocaleDateString();
}

function Comment(props){
    return (
    <div>
        <div>{formatDate(props.date)}</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    )
}

const comment = {
    date: new Date(),
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comment date={comment.date}/>);

Comment 컴포넌트는 JSX로 작성된 div 태그와 formatDate(props.date)로부터 반환된 날짜 정보를 렌더링합니다.

그 후, comment 변수에 현재 날짜 정보를 담은 객체를 할당합니다.

ReactDOM.createRoot() 메서드를 사용하여 root 변수에 렌더링할 DOM 요소를 지정합니다. 이후 root.render() 메서드를 사용하여 Comment 컴포넌트를 실제 DOM 요소에 렌더링합니다. 이때, Comment 컴포넌트에는 date props로 comment.date 객체를 전달합니다.

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

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

const name = {
        name: "쭐 블로그",
        text: "오늘의 리액트를 배웠습니다.",
        author: {
        name: "REACT",
        url: "꿀잼!"
    }
}

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 컴포넌트는 JSX로 작성된 div 태그와 props로 전달받은 값을 렌더링합니다.

그 후, name 변수에 name, text, author 객체를 담은 객체를 할당합니다.

ReactDOM.createRoot() 메서드를 사용하여 root 변수에 렌더링할 DOM 요소를 지정합니다. 이후 root.render() 메서드를 사용하여 Hello 컴포넌트를 실제 DOM 요소에 렌더링합니다. 이때, Hello 컴포넌트에는 props로 name.name, name.text, name.author.name, name.author.url 값을 전달합니다.

Hello 컴포넌트는 전달받은 props를 사용하여 title1, title2, title3, title4의 내용을 렌더링합니다. 이 예시에서는 name, text, author.name, author.url의 값이 각각 title1, title2, title3, title4에 대응됩니다.
 

props

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

props는 React에서 컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위해 사용되는 객체입니다. props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터를 포함하고 있으며, 일반적으로 컴포넌트의 속성을 나타내는데 사용됩니다.

props는 컴포넌트 내부에서 읽기 전용으로 사용되며, 부모 컴포넌트가 props를 전달한 후에는 자식 컴포넌트에서 변경할 수 없습니다. 이러한 특성으로 인해 React에서는 단방향 데이터 흐름을 따르는 개념으로, props를 통해 컴포넌트 간 데이터를 전달하고 상태를 관리합니다.
 
 
 
리액트 문법? 대충 요약 ㅎㅎ
 
1. 대문자로 시작하면 컴퍼넌트 선언, 소문자는 그냥 함수~
2. 태그 안에서 변수를 불러올 때는 중괄호를 써줍니다. {}
3. return에 태그가 2줄 이상이면 괄호를 써줍니다.
4. 부모 박스가 있어야합니다.