React

오늘은 React를 배웠습니다.

 

React는 Facebook에서 개발된 오픈소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다.

React는 데이터가 변경될 때 자동으로 UI를 업데이트하는데 특화되어 있어서, 대규모 애플리케이션에서도 높은 성능과 유지보수성을 제공합니다.
React는 컴포넌트라는 개념을 중심으로 구성됩니다. 컴포넌트는 화면의 일부분을 담당하는 독립적인 모듈이며, 이를 조합하여 전체 UI를 구성합니다. 컴포넌트는 자체적으로 상태(state)를 가지고 있고, 이 상태가 변경되면 React는 자동으로 컴포넌트의 렌더링을 업데이트합니다.

 

React를 설치하려면 

첫번째로는 Node.js를 설치해야 합니다.  --> https://nodejs.org/ko

Node.js

Node.js는 JavaScript를 사용하여 서버 측 애플리케이션을 만들기 위한 런타임 환경입니다. 이것은 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 해주는 프로그램입니다. Node.js를 사용하면 JavaScript를 사용하여 서버 측 애플리케이션을 작성하고 실행할 수 있습니다.

 

Node.js를 설치하면 npm(Node Package Manager)사용 할 수 있습니다.

 

npm은 Node.js 패키지 관리자입니다. Node.js 애플리케이션을 개발할 때 필요한 모듈과 라이브러리를 쉽게 설치하고 관리할 수 있습니다. npm을 사용하면 다른 개발자들이 작성한 Node.js 모듈을 쉽게 사용할 수 있으며, 자신이 작성한 모듈을 다른 사람들과 공유할 수도 있습니다. npm을 통해 프로젝트에 필요한 패키지를 관리할 수 있습니다. 이를 통해 개발자는 코드를 재사용하고 프로젝트의 생산성을 높일 수 있습니다.

 

설치를 다 끝냈으면

명령 프롬프트(Command Prompt) cmd 에서 npx create-react-app react1를 입력하면 설정한 경로에 react1 폴더가 하나 생성됩니다.

 

React 사용법!

react는

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

를 꼭 사용합니다.

 

위 코드는 React를 사용하여 웹 페이지에서 UI를 구성하는 데 필요한 React 및 ReactDOM 라이브러리를 가져오는 코드입니다.
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React를 사용하면 컴포넌트라는 재사용 가능한 코드 조각을 만들어 UI를 구성할 수 있습니다.
ReactDOM은 React로 작성된 UI 컴포넌트를 브라우저에서 렌더링하는 데 사용되는 라이브러리입니다. React로 작성된 UI 컴포넌트를 HTML DOM 요소로 변환하고, 변환된 요소를 브라우저에 표시할 수 있습니다.
ReactDOM은 클라이언트 측 렌더링을 담당합니다. 클라이언트 측 렌더링은 서버 측 렌더링과 대조적으로, 브라우저에서 JavaScript 코드를 사용하여 UI를 렌더링하는 방식입니다. 이를 통해 더 빠르게 사용자 인터페이스를 로드하고 상호작용성을 개선할 수 있습니다.

 

컴포넌트 단축키 정리 사이트 <----

JAX

jax는 JavaScript를 사용하여 비동기적으로 서버와 데이터를 교환할 수 있는 기술입니다. jax는 JavaScript Asynchronous XML과 비슷한 개념으로, Ajax는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환합니다.

Ajax를 사용하면 페이지를 새로 고치지 않고도 서버와 데이터를 비동기적으로 교환할 수 있으므로, 사용자 인터페이스의 반응성과 성능을 향상시킬 수 있습니다. 또한 Ajax는 서버로부터 동적으로 데이터를 가져와서 페이지를 업데이트할 수 있으므로, 웹 페이지의 사용자 경험을 개선할 수 있습니다.

Ajax를 사용하는 방법은 일반적으로 XMLHttpRequest 객체를 생성하여 서버로부터 데이터를 가져오거나 보내는 것입니다. 이를 통해 JavaScript를 사용하여 서버와 비동기적으로 데이터를 교환할 수 있습니다. 또한 최신 웹 프레임워크에서는 Ajax 요청을 더욱 쉽게 보낼 수 있는 기능을 제공합니다

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

ReactDOM.createRoot 메서드를 사용하여 React Root를 만듭니다. React Root는 React 애플리케이션의 최상위 컴포넌트를 래핑하는 객체입니다. 이 객체를 사용하여 애플리케이션의 렌더링을 관리하고, 렌더링 중에 발생하는 상호작용 및 이벤트 처리를 조정할 수 있습니다.

그리고 나서, createRoot 메서드에서 반환된 root 객체를 사용하여 React 요소를 렌더링합니다. 위 코드에서는 root 객체의 render 메서드를 사용하여 <h1>HELLO WORLD</h1> 요소를 렌더링합니다. 이렇게 렌더링된 요소는 React Root에 마운트되어 화면에 표시됩니다.

Concurrent Mode는 React 18에서 새롭게 추가된 기능으로, React 애플리케이션의 성능을 향상시키는 방법을 제공합니다. Concurrent Mode는 React 애플리케이션을 동시에 처리하여 사용자 경험을 개선합니다. 이를 통해 사용자가 애플리케이션의 반응성을 느낄 수 있으며, 페이지 로딩 속도와 성능을 향상시킬 수 있습니다.

 

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

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

 

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

function helloName(){
return name.nick;
}

const name = {
nick : "kim"
}

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

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

// Hello,kim