리액트 살짝 만져보기

REACT

React는 Facebook에서 만든 UI 라이브러리로, 빠른 성능과 컴포넌트 기반 UI 구성 등의 특징을 가지고 있습니다.

가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 성능을 향상시킵니다. 가상 DOM은 메모리 상에 존재하는 가짜 DOM으로서, 실제 DOM과 동기화되면서 변경사항을 최적화된 방법으로 적용합니다.

컴포넌트 기반: React는 컴포넌트 기반으로 UI를 구성합니다. 각 컴포넌트는 독립적으로 작동하며, 재사용성이 높습니다.

JSX: React는 JSX라는 문법을 사용하여 HTML과 JavaScript를 함께 사용할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성이 향상됩니다.

React는 다양한 프로젝트에서 사용되며, 대규모의 웹 애플리케이션을 구축할 때 매우 유용합니다. 또한 React Native라는 도구를 사용하여 모바일 애플리케이션도 만들 수 있습니다.

 

 

 

REACT 설치

먼저, React를 설치하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js는 JavaScript를 실행할 수 있는 환경을 제공하고, npm은 JavaScript 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다. Node.js를 설치하는 방법은 해당 운영체제에 따라 다르기 때문에, Node.js 공식 홈페이지에서 다운로드 받아 설치합니다.

https://nodejs.org/ko

Node.js

Compiled successfully!

    You can now view react1 in the browser.
    
      Local:            http://localhost:3000
      On Your Network:  http://192.168.1.205:3000
    
    Note that the development build is not optimized.
    To create a production build, use npm run build.
    
webpack compiled successfully

 

 

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(HELLO WORLD);

//HELLO WORLD

2. JSX

JavaScript XML의 확장 문법으로, React에서 UI를 작성하기 위해 사용되며, HTML과 유사한 마크업을 작성할 수 있습니다.

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

const name = "Kim do hyun";
const hello = hello {name};

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

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

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

function helloName(){
    return name.nick;
};

const name = {
    nick : "webstoryboy",
};

const hello = Hello, {helloName()};

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

3-1. 렌더링

import React from 'react';
import ReactDOM from 'react-dom';
    
function clock(){
  let clock = document.getElementById("clock");
    
  setInterval(function(){
    clock.innerHTML = new Date().toLocaleDateString();
  }, 1000)
}
    
clock();
    
function clock(){
  const element = (
    
      hello, kimdohyun
      지금은 {new Date().toLocaleDateString()}입니다. 
    
  );
    
  ReactDOM.render(element, document.getElementById('root'));
}
    
export default clock