리액트 살짝 맛보기

리액트 맛보기

리액트란 ?

• React는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다.
• React는 기존의 HTML, CSS 및 JavaScript 기술과 함께 사용됩니다. React는 빠르고 효율적인 UI 개발을 가능하게 하며, 동적인 웹 애플리케이션을 쉽게 작성할 수 있도록 해줍니다.
• React는 컴포넌트 기반 아키텍처를 사용하며, 재사용 가능한 UI 요소를 만들어낼 수 있습니다. 또한, React는 Virtual DOM이라는 기술을 사용하여 UI 업데이트를 빠르고 효율적으로 처리할 수 있습니다.

리액트 사용하기

• React를 사용하려면 먼저 Node.js와 npm이 설치되어 있어야 합니다.
• Node.js는 자바스크립트 런타임입니다.

Node.js 설치하기

https://nodejs.org/ko

•  npm(Node Package Manager)은 Node.js 패키지 매니저로서, Node.js 애플리케이션을 개발할 때 필요한 라이브러리, 모듈, 프레임워크 등을 설치하고 관리할 수 있는 도구입니다.
• npm을 사용하여 패키지를 설치하면 해당 패키지와 관련된 모든 의존성(dependencies)을 자동으로 설치할 수 있습니다. 이를 통해 개발자는 빠르게 개발을 시작할 수 있으며, 의존성 관리와 버전 관리를 효과적으로 할 수 있습니다.
• npm은 오픈소스로 개발되어 있으며, Node.js와 함께 설치되어 제공됩니다. npm을 사용하여 패키지를 설치하려면 명령어 프롬프트 또는 터미널에서 npm install <패키지 이름>을 입력하면 됩니다.

npm설치하기

npx create-react-app react1

Compiled successfully!

You can now view react1 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.98:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

위 문구가 떴다면 성공입니다.

 

React 기본

화면에 출력하기

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 Hoong</h1>);

위와 같은 방법으로 화면에 "Hello Hoong"을 출력할 수 있습니다.

 

JSX

• JSX는 JavaScript XML의 약자로, React에서 사용하는 자바스크립트의 확장 문법입니다. 
• JSX는 XML과 유사한 구문으로 작성된 코드를 JavaScript 코드로 변환하여 실행합니다.
• React에서 UI를 작성할 때 JSX를 사용하여 작성하며, JSX를 사용하면 UI 요소를 더 직관적이고 쉽게 작성할 수 있습니다.

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

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

위와 같이 Html문서 태그와 자바스크립트를 같이 사용할 수 있습니다.

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

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

const hello = <h1>Hello, {helloName()}</h1>

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

객체와 함수를 사용하는 방법입니다.

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

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

function clock(){
    const element = (
    <div>
        <div>Hello, Hoong</div>
        <h2>지금은 {new Date().toLocaleString()} 입니다.</h2>
    </div>
    );

    ReactDOM.render(element, document.getElementById("root"));
};

export default clock;

함수를 사용하여 출력하는 방법입니다.

 

 

 

 

 

이상으로 React에 대해 살짝 맛만 보았습니다 !