Meme's IT

[React] 리액트란? 본문

FrontEnd/React

[React] 리액트란?

Memez 2023. 12. 16. 04:13

 

 

 

# 리액트란?

웹과 네이티브 사용자 인터페이스를 위한 라이브러리

SPA를 쉽고 빠르게 만들 수 있게 도와주는 도구

더보기

SPA란?

= Single Page Application

2023.11.01 - [Vue] - [Vue] Front-end 사전지식

참고!

 

 

# 리액트의 장점

1. 빠른 업데이트와 랜더링 속도

리액트도 Vue와 동일하게 Virtual DOM이라는 것을 사용

→ 최소한의 업데이트 부분을 통해 빠르게 랜더링 가능

 

2. 컴포넌트 기반 구조

컴포넌트란??

하나의 페이지에는 여러 구성요소가 있는데, 각각의 요소들을 컴포넌트라고 함

이런 컴포넌트 기반의 구조를 사용함으로써 재사용성을 챙길 수 있음!

 

3. 재사용성

각각의 컴포넌트로 나눠놨기 때문에 해당 컴포넌트를 다시 사용할 수 있음

재사용을 통해, (1) 시간을 줄일 수 있고 (2) 유지 보수가 용이해짐

 

4. 활발한 지식 공유 및 커뮤니티

상당히 많이 쓰이는 라이브러리로, 도움을 받기가 편함

 

리액트 깃허브

 

GitHub - facebook/react: The library for web and native user interfaces.

The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.

github.com

stackoverflow

 

Human verification

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com

 

5. 모바일 앱 개발 기능

리액트를 익힌 이후에, 리액트 네이티브라는 모바일 환경 UI 프레임워크를 통해 모바일 개발도 가능!

원래 모바일 앱은 안드로이드는 Kotlin, iOS는 swift이라는 프로그래밍 언어와 프레임워크를 배워야하지만,

리액트 네이티브를 사용해서 둘 다 출시 가능

 

 

# 리액트 단점?

단점으로는 학습량이 매우 많다는 것과 

state(상태) 관리하는 것이 어렵다는 것이 있음

 

 

우선, 냅다 써보자

저번에 vue에서 했던 것처럼 html 파일 한개만 있어도 사용 가능함

 

우선 index.html파일을 하나 만들어주자

<!DOCTYPE html>
<html lang="en">
<head>
    <title>memez의 블로그</title>
</head>
<body>
    <h1>Memez의 블로그</h1>
    <p>안녕하세요, 환영합니다!</p>

    <!-- DOM 컨테이너 -->
    <div id="root"></div>

    <!-- 리액트 가져오기 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- 리액트 컴포넌트 가져오기 -->
    <script src="MyButton.js"></script>
</body>
</html>

 

id가 root인 div를 하나 만들고, 

리액트는 공식문서에서 가져오면 된다.

 

 

그리고 나서, MyButton.js 파일을 같은 위치에 만들어준다.

function MyButton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(MyButton));

 

 

이후, html 파일을 열어보면

초기화면

 

버튼을 클릭했을 때

 

버튼에 따라서 내용이 바뀌는 것을 확인할 수 있음

근데, 이렇게 매번 추가해주기엔 귀찮으니까 한번에 사용할 수 있는 create-react-app이 있음

은 다음 글에서 해보자

저작자표시 비영리

'FrontEnd > React' 카테고리의 다른 글

[React] Vite에 Tailwind CSS와 Next UI 세팅하기  (0) 2024.03.12
[React] 파일 업로드 버튼 만들기(+ typescript)  (0) 2024.03.12
[React] JWT 인증키 저장하기  (0) 2024.02.04
[React] Vite로 React 프로젝트 만들기  (0) 2024.01.18
[React] Vue와 React의 차이점  (0) 2024.01.15
'FrontEnd/React' Related Articles more