react_기본개념 익히기(1)

리액트(react)란?

• 리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구입니다. 리액트는 컴포넌트 기반 아키텍처를 사용하여 개발자가 UI를 재사용 가능한 작은 부분으로 나누고 이를 조합하여 복잡한 UI를 구성할 수 있게 해줍니다.
• 리액트는 가상 DOM(Virtual DOM)을 사용하여 빠르고 효율적인 UI 업데이트를 가능하게 합니다. 가상 DOM은 실제 DOM에 대한 추상화된 표현으로, 브라우저에서 실제로 DOM을 조작하는 것보다 가벼우며, 변경 사항을 비교하고 최소한의 업데이트만 수행할 수 있습니다.
• 리액트는 JSX라는 문법을 사용하여 자바스크립트 코드 안에 마크업 코드를 작성할 수 있습니다. 이를 통해 개발자는 UI와 관련된 로직과 렌더링을 함께 작성할 수 있으며, 코드 가독성과 유지보수성을 향상시킬 수 있습니다.
• 리액트는 단독으로 사용될 수도 있지만, 다른 라이브러리나 프레임워크와 함께 사용할 수도 있습니다. 예를 들어, 리액트는 리덕스(Redux)와 함께 사용되어 복잡한 애플리케이션의 상태 관리를 용이하게 합니다.

그렇다면 사용은 어떤 식으로 하는 것인지 알아볼까요?

---

1. hello world 출력하기

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

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

// HELLO WORLD

• 위 코드에서는 <h1>HELLO WORLD</h1>가 리액트 컴포넌트로 작성되어 있습니다.
• ReactDOM.render() 함수를 사용하여 리액트 컴포넌트를 실제 DOM 요소로 변환하고, 지정된 DOM 요소에 렌더링합니다. 위 코드에서는 document.getElementById('root')를 사용하여 id가 "root"인 요소를 찾아서 해당 요소에 렌더링합니다.
• 결과적으로, 위 코드를 실행하면 root에 지정된 DOM 요소에 "HELLO WORLD"라는 텍스트가 출력됩니다.

 

2. JSX

JSX(JavaScript XML)는 React에서 사용되는 JavaScript의 확장 문법입니다. 이 문법은 XML과 유사하게 생겼지만, JavaScript 코드를 작성할 수 있습니다. JSX는 React에서 UI를 만들 때 사용되며, 가독성이 높고 템플릿과 유사하게 작성할 수 있어 개발자들에게 매우 편리합니다.

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

const name = "noji";
const hello = <h1>hello {name}</h1>;

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

// hello noji

• JSX 문법을 사용하여 "hello noji"라는 텍스트를 생성하고, 이를 ReactDOM.render() 함수를 사용하여 지정된 DOM 요소에 렌더링합니다.
• JSX는 HTML과 유사한 문법을 사용하여 React 컴포넌트를 작성할 수 있도록 해주는 문법이며, 위 코드에서는 <h1>hello {name}</h1>라는 JSX 코드가 React 컴포넌트로 변환되어 렌더링됩니다.
• ReactDOM.render() 함수를 사용하여 hello 변수에 할당된 JSX 코드를 실제 DOM 요소로 변환하고, 지정된 DOM 요소에 렌더링합니다. 위 코드에서는 document.getElementById('root')를 사용하여 id가 "root"인 요소를 찾아서 해당 요소에 렌더링합니다.
• 결과적으로, 위 코드를 실행하면 root에 지정된 DOM 요소에 "hello noji"라는 텍스트가 출력됩니다.

 

객체와 함수를 같이 사용한 경우

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

function helloName(){
return name.nick;
}

const name = {
nick : "noji"
}

const hello = <h1>Hello,{helloName()}</h1>  // 함수 실행

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

// Hello,noji

• helloName 함수는 name 객체의 nick 속성을 반환합니다.
• 그 다음으로 name 객체를 정의하고, 이 객체의 nick 속성에 "noji" 값을 할당합니다.
• 마지막으로 hello 변수는 JSX를 사용하여 "Hello, noji"라는 문자열을 생성합니다. 이 때 중괄호({}) 안에서 helloName() 함수를 호출하여 name 객체의 nick 속성인 "noji" 값을 반환하고, 이를 문자열에 추가합니다.
• ReactDOM.createRoot() 함수를 사용하여 root 변수를 생성하고, root.render() 함수를 사용하여 hello 변수에 할당된 JSX 코드를 렌더링합니다. 이 때, 함수 호출 결과를 JSX에서 사용할 수 있습니다.
• 결과적으로, 위 코드를 실행하면 root에 지정된 DOM 요소에 "Hello, noji"라는 텍스트가 출력됩니다.

 

3. 랜더링

import React from 'react';   // imr이 단축어
import ReactDOM from 'react-dom';   // imrd이 단축어

// function clock(){
//   let clock = document.getElementById("clock");

//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// };
// clock();

// rfce : function까지 한번에 쓰는 단축키

function clock(){
    const element = (
    <div>
        <div>hello,noji</div>
        <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
    </div>
    );
    ReactDOM.render(element, document.getElementById('root'));
}

export default clock;

• React와 ReactDOM 모듈을 import하여 사용합니다.
• clock 함수에서는 element 변수에 JSX 문법을 사용하여 시계를 출력하는 React 컴포넌트를 생성합니다. JSX 문법을 사용하면 HTML과 비슷한 구조로 React 컴포넌트를 작성할 수 있습니다.
• ReactDOM.render() 함수를 사용하여 element 변수에 저장된 React 컴포넌트를 실제 DOM 요소로 변환하고, 지정된 DOM 요소에 렌더링합니다. 위 코드에서는 document.getElementById('root')를 사용하여 id가 "root"인 요소를 찾아서 해당 요소에 렌더링합니다.
• 이 때, new Date().toLocaleDateString() 함수를 사용하여 현재 시간을 표시합니다.
• export default clock 문장은 해당 파일에서 clock 함수를 모듈로 내보내는 역할을 합니다. 이 파일을 다른 파일에서 import하여 사용할 수 있습니다.
• 결과적으로, 위 코드를 실행하면 root에 지정된 DOM 요소에 현재 시간과 "hello, noji"라는 텍스트가 출력됩니다. 시간은 1초마다 업데이트됩니다.