728x90
반응형
리액트 React
리액트(React)란?
React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. React는 사용자 인터페이스를 만들기 위한 도구로 사용됩니다. React는 컴포넌트라고 하는 재사용 가능한 UI 요소를 만드는 데 중점을 둡니다. 각 컴포넌트는 자체적으로 상태를 관리하며, 필요에 따라 데이터를 받아와서 화면에 렌더링합니다.
React는 가상 DOM(Virtual DOM)을 사용하여 효율적인 업데이트를 가능하게 합니다. React는 상태 변경이 있을 때마다 전체 페이지를 다시 로드하는 대신, 변경된 부분만 업데이트하여 더 빠른 성능을 제공합니다. 이러한 기능으로 인해 React는 단일 페이지 어플리케이션(SPA)을 만들기에 매우 적합하며, 현재 웹 개발에서 가장 인기 있는 프론트엔드 라이브러리 중 하나입니다.
리액트(React) 설치
1. Node.js 설치하기
React를 사용하려면 먼저 Node.js를 설치해야 합니다. Node.js는 React와 함께 사용될 수 있는 JavaScript 런타임 환경입니다. Node.js를 설치하려면 Node.js 공식 웹사이트(https://nodejs.org/)에서 다운로드 받아 설치하세요.
Node.js를 설치하면 npm이 자동으로 설치됩니다. npm(Node Package Manager)은 Node.js 패키지 관리자입니다. npm을 사용하면 다른 사람이 만든 패키지를 쉽게 설치하고 관리할 수 있습니다. npm은 패키지 설치, 업데이트, 제거 및 의존성 관리를 포함한 다양한 작업을 수행할 수 있습니다.
2. Create React App 설치하기 및 React 애플리케이션 만들기
명령어 작성
작성 내용 : npx create-react-app 애플리케이션명
3. React 애플리케이션 실행하기
명령어 작성
작성 내용 :
cd 애플리케이션명
npm start
위에 방법을 순서대로 명령어를 작성하고 실행하면 아래와 같은 코드가 나옵니다. 그러면 성공한 것입니다.
Compiled successfully!
You can now view react1 in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.145:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
React 기본 개념 익히기
1. 출력하기
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>hello world</h1>);
// 결과 : hello world
2. JSX
JSX(JavaScript XML)는 React에서 UI를 구성하는 데 사용되는 문법입니다. JSX는 HTML과 매우 유사하게 생겼지만, JavaScript를 확장한 문법입니다. JSX는 React 컴포넌트에서 UI를 정의할 때 사용되며, 이를 사용하면 JavaScript 코드 안에 HTML 코드를 작성할 수 있습니다.
JSX는 React에서 UI를 작성하는 데 매우 편리한 문법이며, JavaScript 코드와 HTML 코드를 혼합하여 작성하므로 가독성이 높고, 개발자들이 UI를 더 쉽게 작성할 수 있도록 도와줍니다.
import React from "react";
import ReactDOM from "react-dom/client";
const name = "dongjin";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
// 결과 : hello dongjin
2-1. 객체와 함수를 같이 사용한 경우
import React from "react";
import ReactDOM from "react-dom/client";
function helloName(){
return name.nick;
};
const name = {
nick : "dongjin"
}
const hello = <h1>Hello, {helloName()}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
// 결과 : Hello, dongjin
3. 랜더링
React 컴포넌트를 화면에 그리는 과정이 랜더링이라고 할 수 있습니다. React에서 랜더링은 컴포넌트가 변화하면 다시 랜더링을 수행하여 변화된 내용을 화면에 반영하는 것을 말합니다. React는 Virtual DOM을 사용하여 랜더링 성능을 최적화하고, 필요한 부분만 업데이트하도록 처리하여 불필요한 랜더링을 줄입니다.
import React from 'react';
import ReactDOM from 'react-dom';
// 자바스크립트 javascript 유형
// function clock(){
// let clock = document.getElementById("clock");
// setInterval(function(){
// clock.innerHTML = new Date().toLocaleDateString();
// }, 1000);
// };
// clock();
// 리액트 react 유형
function clock(){
const element = (
<div>
<div>hello, dongjin</div>
<h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
};
export default clock;참고
위와 같이 랜더링 방법으로 기존에 자바스크립트(javascript)를 리액트(react) 유형으로 변경 할 수 있어야합니다. 이유는 자바스크립트보다 리액트 유형이 더 가독성이 좋기 때문입니다.
728x90
반응형
