Web/React

CRA(Create React App) vs. Vite + React

CRA(Create React App) Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev Create React App은 단일 페이지 React 애플리케이션을 생성하기 위해 공식적으로 지원되는 방법이다. Webpack이나 Babel 같은 도구들을 설정하거나 설치할 필요가 없다. 코드에 집중할 수 있도록 이미 설정되어있고 숨겨져 있다. App 만들기 노드 14 이상의 버전이 필요하다. 새로운 app을 만들기 위해서는, 다음 방법중 하나를 골라서 하면 된다. npx npx create-react-app..

Bundler

번들러란? 한마디로 정리하자면, "의존성이 있는 모듈들을 하나로 합쳐주는 툴" 이라고 생각하면 될 것 같다. 우리는 JS 모듈을 사용하려면, HTML에서 태그로 우리가 작성한 JS 파일을 불러와야 했다. 한 JS 파일만 불러올 경우엔 상관없지만, 여러 JS 파일을 불러올경우엔 난감한 경우가 생길 수도 있다. 예를들어 A.js에서 작성한 A라는 모듈이 B.js에서 작성한 B라는 모듈과 관계가 있다고 해보자. (예를 들면 A에서 B를 참조한다던가 하는 상황) HTML 에선 이런 경우에 어떤 스크립트를 먼저 부르냐, 즉 어떤 스크립트를 부르는 태그를 먼저쓰냐에 따라 문제가 될 수도 있다. 서로 모듈들이 엮어있는 경우에 아직 선언이 되지않은 것을 참조한다거나 하면 예상치 못한 결과를 초래할 수 있기 때문이다. ..

React Hooks

1. useState State란 컴포넌트가 가질 수 있는 상태를 의미한다. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해준다. // 사용법: const [state, setState] = useState(초기값); // 아래와 같이 이름을 바꿔 사용할 수 있다. const [time, setTime] = useState(5); State를 변경하게 되면, 화면을 다시 렌더링하게 된다. import { useState } from 'react'; const heavyWork = () => { console.log('heavy work'); return ['홍길동', '김민수']; }; function App() { // 초기값을 가져올 때 무거운 작업을 해야 ..

React & React-Dom

개요 아래와 같이 기본 index.js를 보면 'react'와 'react-dom/client'를 import 하는것을 볼 수 있다. 두개의 차이점은 무엇이고 굳이 'react'에서 'react-dom'을 분리한 이유는 무엇일까? import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); React 2022.10.11 - [React] - Why React? Why React? What is React? React는..

Why React?

What is React? React는 지금은 Meta가 된 Facebook이 만든 자바스크립트의 UI 라이브러리이다. 우리는 보통 Angular, React, Vue를 제일 많이 사용하는 자바스크립트 프레임워크라고 알고 있다. 하지만 React 공식문서에는 React는 라이브러리 라고 나와있다. 그러면 라이브러리와 프레임워크의 차이는 무엇일까? 라이브러리 vs. 프레임워크 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임, 즉 특정 기능들을 모아둔 코드와 함수들의 집합이다. 따라서 필요할때마다 사용자가 직접 가져다 쓰는 방식이다. 프레임워크 라이브러리는 우리가 어떤 기능이나 코드가 필요할때마다 가져다 쓰는 방식이지만, 프레임워크는 반제품화된 어떠한 '기반', '구조', ..

JSX

JSX JSX는 JavaScript Xml 을 의미한다. 결국 HTML은 XML이라고 할 수 있기 때문이다. 그래서 JS 안에 HTML 을 갖고 있는 형태를 띄는 것이다. 하지만 코드는 이렇지만 실제로는 우리가 보는 화면 뒷단에서 변환과정을 거친다. 좀 더 브라우저 친화적인 코드로 변환시킨다. 이 변환된 코드를 크롬의 개발자도구의 Source 탭에서 확인할 수 있다. const element = Hello, world!; 위의 코드는 JSX의 한 예시이다. 리액트의 생김새를 정의할 때 사용하는 문법이라고 생각하면 된다. 보통 리액트에서 UI 디자인 시에 같이 많이 쓰인다. 또다른 예시를 보자. function App() { return ( Let's get started! ); } export defau..