리액트 함 해봅시다!

오늘은 드디어 리액트를 들어갑니다!! 

하지만 처음부터 서버에 올리는게 막혀서 매우 우울MAX였던.

 

아무튼 리액트가 뭔지 알아보러 가시죵

리액트에 대해 알아보자!

🔧리액트란?

React는 Facebook에서 개발한 JavaScript 기반의 프론트엔드 라이브러리입니다.

React를 사용하면 동적인 사용자 인터페이스를 만들 수 있으며, 가상 DOM을 사용하여 웹 애플리케이션의 성능을 최적화할 수 있습니다. React는 컴포넌트 기반으로 작동하며, 컴포넌트는 UI 요소를 렌더링하고 상태를 관리하는 자체적인 기능 단위입니다. 이러한 컴포넌트는 더 큰 애플리케이션을 작고 재사용 가능한 단위로 분할하여 작성할 수 있으므로 코드의 유지 보수성과 재사용성이 향상됩니다.

 

리액트의 장점

선언적 UI: React는 선언적 UI를 제공합니다. 이는 UI를 간단하게 설계하고 유지보수하기 쉽게 만들어줍니다.

컴포넌트 기반: React는 컴포넌트 기반으로 UI를 구성합니다. 이는 코드 재사용성과 모듈성을 높여줍니다.

가상 DOM: React는 가상 DOM을 사용합니다. 이는 실제 DOM에 접근하지 않고, 가상으로 DOM을 조작함으로써 렌더링 성능을 향상시켜줍니다.

상태 관리: React는 컴포넌트 내부에서 상태를 관리할 수 있습니다. 이는 상태 변경에 따른 UI 업데이트를 간편하게 해줍니다.

높은 생태계: React는 매우 큰 생태계를 가지고 있습니다. 이는 다양한 라이브러리와 플러그인을 사용할 수 있게 해줍니다.

빠른 렌더링 속도: React는 가상 DOM을 사용하고, 변경된 부분만 업데이트하기 때문에 빠른 렌더링 속도를 보장합니다.

서버 측 렌더링: React는 서버 측 렌더링을 지원합니다. 이는 초기 로딩 속도를 개선하고 SEO에 유리합니다.

리액트의 단점

러닝커브: React는 다른 프레임워크나 라이브러리에 비해 상대적으로 러닝커브가 높습니다. React를 사용하려면 JavaScript, JSX, 컴포넌트, 상태 관리, 생명주기 메서드, 이벤트 처리 등에 대한 이해가 필요합니다.

복잡성: React는 어떻게 사용할지에 따라 복잡성이 크게 달라질 수 있습니다. 특히, Redux와 같은 상태 관리 라이브러리를 사용하면 코드가 복잡해질 수 있습니다.

성능 문제: React는 Virtual DOM을 사용하므로 렌더링 속도가 느려질 수 있습니다. 또한, 매우 큰 애플리케이션에서는 성능 문제가 발생할 수 있습니다.

다른 라이브러리와의 통합: React는 다른 라이브러리나 프레임워크와 함께 사용될 때 문제가 발생할 수 있습니다. 예를 들어, React와 jQuery를 함께 사용하면 문제가 발생할 수 있습니다.

중앙 집중식 상태 관리: React는 중앙 집중식 상태 관리를 지원하지 않으므로, 복잡한 애플리케이션에서는 Redux와 같은 상태 관리 라이브러리를 사용해야합니다.

SEO 문제: React는 서버 측 렌더링을 지원하지만, SEO 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 추가적인 설정과 작업이 필요합니다.

 

🔧리액트 설치하는 방법

Node.js 설치
https://nodejs.org/ko

Node.js

Node.js와 npm이 설치되어 있는지 확인하세요.이를 확인하려면 터미널 또는 명령 프롬프트에서 다음 명령어를 입력하세요!

 

1. npx create-react-app react1
2. 해당 경로로 이동
3. npm start

 

명령어 프롬프트에 이렇게 쳐줍시당.

 

🔧REACT 기본 개념 익히기

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

2. JSX

JSX는 JavaScript와 XML의 확장 문법으로, React에서 UI를 구성할 때 사용됩니다. JSX는 마크업과 JavaScript 코드를 결합해 코드의 가독성과 유지 보수성을 높여주며, React 엘리먼트를 생성하는 데에도 사용됩니다.

 

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

const name = "Yeo Da Seul";
const hello = <h1>hello {name}</h1>;

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

//hello Yeo Da Seul

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

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

function helloName(){
    return name.nick;
}

const name = {
    nick: "JJUL",
}

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

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

//hello JJUL

3. 렌더링

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 = (
    <div>
        <div>hello, jjul</div>
        <h2>지금은 {new Date().toLocaleDateString()}입니다. </h2>
    </div>
    );
    ReactDOM.render(element, document.getElementById('root'))
}

export default clock;

 

아직 갈 길이 머네여 ㅎ