리액트(REACT) - 02

리액트란?

React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다.

 

 

장점

1. 가독성과 유지보수성 : React는 컴포넌트 기반으로 작성되어, 코드의 가독성과 유지보수성을 높일 수 있습니다. 각각의 컴포넌트는 독립적으로 작성되어, 필요한 경우 쉽게 재사용할 수 있으며, 부모-자식 관계를 통해 복잡한 UI를 간단하게 구성할 수 있습니다.
2. 높은 생산성 : JSX 문법을 사용하여, HTML과 JavaScript 코드를 쉽게 조합할 수 있습니다. 또한, Virtual DOM을 활용하여 변경된 부분만 새로 그려주는 방식으로 불필요한 렌더링을 최소화함으로써, 높은 생산성을 제공합니다.
3. 확장성과 유연성 : React는 다른 라이브러리나 프레임워크와 쉽게 통합이 가능합니다. 또한, React Native를 사용하여 모바일 애플리케이션을 개발할 수 있습니다.
4. 성능 : React는 Virtual DOM을 사용하여 변경된 부분만 최적화된 방식으로 렌더링함으로써, 높은 성능을 유지합니다. 또한, 컴포넌트 단위로 코드를 작성하고, 최적화 기능을 제공함으로써, 빠른 렌더링 속도를 보장합니다.
5. 커뮤니티와 생태계 : React는 Facebook에서 개발하고 지원하며, 매우 활발한 커뮤니티와 생태계를 가지고 있습니다. 이를 통해, 다양한 플러그인과 라이브러리, 문서와 튜토리얼 등을 활용할 수 있습니다.

---

컴퍼넌트

리액트 컴포넌트(React component)는 UI를 구성하는 독립적인 모듈이며, 리액트 애플리케이션을 구성하는 기본적인 빌딩 블록입니다. 컴포넌트는 프로퍼티(props)와 상태(state)를 가질 수 있으며, 이를 활용하여 동적인 UI를 구성할 수 있습니다.

 

props

props는 읽기 전용이며, 자식 컴포넌트 내에서 수정할 수 없습니다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 일반적으로 문자열, 숫자, 객체, 배열 등의 자료형을 가질 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는 JSX 문법을 사용하여 전달합니다.

 

 

1

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

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

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

//hello, seolhee

 

1. Hello 함수는 JSX 문법으로 작성되어 있으며, 화면에 "hello, seolhee"라는 메시지를 렌더링하기 위한 HTML 코드를 반환합니다.
2. const element 변수에 Hello 컴포넌트를 할당합니다.
3. ReactDOM.createRoot() 메소드는 ReactDOM.render()와는 달리 비동기적으로 렌더링하는 기능을 제공합니다.
4. 마지막으로 root.render() 메소드를 호출하여 element를 root 요소에 렌더링합니다.

 

2

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

function Welcome(props){
    return <h1>hello, {props.name}
}

function App(){
    return (
        <div>
            <Welcome name="cheon" />
            <Welcome name="seol"/>
            <Welcome name="hee"/>
        </div>
    )
}


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


//hello, cheon
//hello, seol
//hello, hee

1. Welcome 컴포넌트를 정의합니다. 이 컴포넌트는 props라는 매개변수를 받아들이고, props.name 값을 출력하는 h1 태그를 반환합니다.
2. App 컴포넌트를 정의합니다. 이 컴포넌트는 Welcome 컴포넌트를 3번 호출하고, 각각의 호출에서 다른 이름 값을 props로 전달합니다. 이렇게 호출된 Welcome 컴포넌트들을 하나의 div 태그로 감싸서 반환합니다.
3. 마지막으로 ReactDOM.createRoot() 메소드로 root 요소를 생성하고, root.render() 메소드를 호출하여 App 컴포넌트를 root 요소에 렌더링합니다.

 

3

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} />);

//2023. 5. 10.
//2
//3
//4

1. formatDate(date) 함수는 전달된 date 객체를 받아서 문자열 형태의 날짜 포맷으로 변환하는 함수입니다.
2. Comment 컴포넌트는 props.date 값을 전달받아서, formatDate 함수를 사용하여 날짜를 포맷팅하고, 그 결과를 화면에 출력하는 div 요소를 반환합니다.
3. const comment 변수를 사용하여 Comment 컴포넌트에 전달할 date 값을 생성합니다. 이 date 값은 현재 시간을 나타내는 객체를 생성하여 전달합니다.
4. ReactDOM.createRoot() 메소드로 root 요소를 생성하고, root.render() 메소드를 호출하여 Comment 컴포넌트를 root 요소에 렌더링합니다.
5. Comment 컴포넌트에는 const comment 변수에서 생성한 date 값을 전달합니다.

 

4

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

function Hello(props){
    return (
    <div>
        <div>{props.name}</div>
        <div>{props.text}</div>
        <div>{props.author}</div>
        <div>{props.author1}</div>
    </div>
    )
}

const name = {
    name : "cheonseolhee",
    text : "hello",
    author : {
    name: "너무",
    name1 : "어려워여",
    }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name={name.name} text={name.text} author={name.author.name} author1={name.author.name1} />);


//cheonseolhee
//hello
//너무
//어려워여

1. Hello 컴포넌트는 props로부터 name, text, author, author1 값을 받아서 각각을 화면에 출력하는 div 요소를 반환합니다.
2. const name 변수를 사용하여 Hello 컴포넌트에 전달할 props 값들을 생성합니다.
3. props 값들은 name, text, author, author1 속성을 가진 객체로 구성됩니다. 그리고 author 속성은 또 다른 객체를 값으로 가지고 있습니다.
4. ReactDOM.createRoot() 메소드로 root 요소를 생성하고, root.render() 메소드를 호출하여 Hello 컴포넌트를 root 요소에 렌더링합니다.
5. Hello 컴포넌트에는 const name 변수에서 생성한 props 값을 전달합니다.