리액트 시작하기

리액트 시작하기

 

 

 

 

REACT!?

리액트는 페이스북에서 개발된 UI(User Interface)라이브러리 입니다.
리액트는 컴포넌트 기반으로 설계되어 있으며, 각각의 컴포넌트는 독립적이고 재사용 가능합니다.

리액트는 Virtual DOM을 사용하여 UI 를 업데이트 합니다.
이는 UI를 업데이트 할 때, 전체 UI를 다시 렌더링 하는 것이 아니라 변경된 부분만 렌더링 하여 성능을 향상시킵니다.

또한, 리액트는 JSX 라는 문법을 사용하여 JavaScript 코드 안에 HTML 코드를 작성할 수 있도록 지원합니다.
JSX 는 HTML과 유사하지만, JavaScript와 통합된 문법을 가지며, 컴파일러를 사용해 일반 javaScript 코드로 변환합니다. 

리액트는 단독으로 사용될 수도 있지만, 다른 라이브러리나 프레임워크와 함께 사영될 수도 있습니다. 

 

 

REACT 설치

리액트를 사용하려면 먼저 Node.js를 설치해야 합니다.
https://nodejs.org/ko 설치는 여기서 하면 됩니다.

리액트프로젝트생성

npx create-react-app react1

create-react-app을 이용해 새로운 프로젝트를 생성하려면 위와같이 명령어를 실행하면 됩니다.

 

이 명령어를 실행하면 react1이라는 이름의 새로운 리액트 프로젝트가 생성됩니다.

 

개발서버시작

cd react1
npm start

프로젝트가 생성되면 cd명령어를 이용해 프로젝트 디렉토리로 이동한 다음, 다음과 같은 명령어를 실행해 개발 서버를 시작할 수 있습니다.

위 명령어를 실행하면, 개발 서버가 시작되고, 브라우저에서 http://localhost:3000 주소를 입력해 리액트 앱을 확인할 수 있습니다.

 

 

 

그럼 이제 리액트의 기본 개념을 살펴보겠습니다.

 

1. Hello World 출력

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

리액트를 사용해 Hello World 문구 출력

 

import 구문을 사용해 React와 ReactDOM 라이브러리를 가져옵니다.

React는 리액트의 핵심 라이브러리이며, ReactDOM 은 리액트와 DOM 을 연결해주는 라이브러리입니다.

 

그 다음, ReactDOM.creacteRoot 함수를 사용해 렌더링할 DOM 요소를 지정하고 

document.getElementById("root") 를 사용해 id가 root인 DOM요소를 선택합니다.

 

createRoot 함수는 리액트 18버전에서도 도입된 새로운 루트 API 중 하나이며, 이전에 사용되던 ReactDOM.render 함수보다 성능이 개선된 버전입니다.

createRoot 함수를 사용하면, 서버 측 렌더링 즉 서버에서 초기 HTML마크업을 생서하여 클라이언트로 전송하는 방식의 웹 애플리케이션을 더 쉽게 작성할 수 있습니다.

 

마지막으로 root.render함수를 사용해 리액트 요소를 렌더링합니다.

render함수는 첫 번째 매개변수로 리액트요소를 받으며, 두번째 매개변수로 렌더링할 DOM 요소를 받습니다. 이 예제는 <h1>Hello World</h1>를 리액트 요소로 지정하고, 앞에서 선택한 DOM요소인 document.getElementById("root")를 두 번째 매개변수로 전달합니다.

 

 

2. JSX

JSX는 React에서 UI를 생성하는 데 필요한 구성 요소와 같은 JavaScript 코드를 생성하기 위해 사용됩니다.
이렇게 생성된 JavaScript 코드는 React 에서 사용되는 createElement()함수를 사용하여 가상돔 객체를 생성합니다.

const name = "jinhyunmi";
const hello = hello {name}

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

//hello jinhyunmi

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

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "hyunmi",
}

const hello = Hello, {helloName()};

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

 

3. 렌더링

import React from 'react'
import ReactDOM from 'react-dom';

// function App(){
//   return (
//     
//       리액트
//     
//   )
// }
// function clock(){
//   let clock = document.getElementById("clock");
    
//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// }
// clock();

function clock(){
    const element = (
    
        hello, jin
        지금은 {new Date().toLocaleDateString()}입니다.
    
    );

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

export default clock;

React와 ReactDOM모듈을 import하고, clock함수를 정의하는 코드

clock 함수는 ReactDOM.render()메소드를 호출하여, React요소를 렌더링합니다.

React 요소는 JSX를 사용하여 정의되어 있으며,

const element = (
    <div>
        hello, jin
        지금은 {new Date().toLocaleDateString()}입니다.
    </div>
);

이 요소는 div태그로 구성

두 개의 텍스트 노드와 newDate().toLocaleDateString()표현식이 포함되어 있습니다.

 

new Date().toLocaleDateString()표현식은 현재 시간을 나타내며, toLocaleDateString()메소드를 사용해 지역화된 문자열로 변환됩니다.

 

마지막으로 ReactDOM.render(element, document, getElementById("root") 코드는 element root라는 id속성값을 가진 욘소에 렌더링합니다.