[Node.js] React.js 란? / React 사용법 ( create-react-app )

React란?

웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬)

 

React 탄생 배경

요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다.

그렇기에 변동사항이 생길때마다, 새로운 페이지를 불러오는 기존의 방식으로는

불필요한 데이터까지 같이 불러와, 비효율적인 메모리 낭비가 커지기 시작했다.

 

React의 필요성

1. React는 가상페이지(Virtual DOM)을 이용해, 전체페이지(DOM)가 아니라 부분적인 페이지(Component)만 불러와

불필요한 메모리 사용을 줄여준다.

( 대표적인 클라이언트 사이드 렌더링(CSR) 앱 )


2. 코드가 읽기 쉬워, 유지 보수하기 좋다!

 

React의 작동방식 ( diff 알고리즘 사용 - diffing )

개발자가 setState로 브라우저의 상태가 변화시키면,

React는 이를 감지해, 가상 화면( Virtual Dom )을 다시 만들고

이전의 가상 화면( Virtual Dom )과 비교하여, 바뀐부분을 업데이트하여

새로운 진짜 화면( Real Dom )에 표출해준다.

 

create-react-app 이란?

페이스북에서 만든 공식적인 React 웹 개발용 Node.js 패키지

 

create-react-app의 필요성

기본적인 React 웹 서버를 만들어준다.

하나부터 열까지 React 웹 서버를 만들어야하는 번거로움이 없어진다!

( webpack, parcel, babel 등등 패키지 자동설치 )

 

create-react-app 설치

// 현재 폴더에 설치

npm i create-react-app


// 컴퓨터에 설치

npm i -g create-react-app

 

React 프로젝트 만들기 ( React 웹 서버 제작 )

// creact-react-app 패키지 설치 되있을때

create-react-app <프로젝트명>


// creact-react-app 패키지 설치하지 않고, 1회성으로 React 서버만 만들때

npx create-react-app <프로젝트명>


기본 형태 앱 불러오기

// typescript 사용한 React 웹 템플릿 가져오기

create-react-app <프로젝트명> --template typescript

 

만들어진 웹서버 실행하기

// package.json안의 "script"에 명령어가 작성 되어있음

npm start

 

파일 최적화(build)하기

npm run build

 

아직 모르는 것

// 테스트

npm run test

// 설정 추가

npm run eject

 

---

create-react-app 파일 분석

 

public 폴더

여러개의 Virtual DOM을 담을 HTML파일(DOM)을 넣는 폴더

favicon.ico : 페이지 아이콘 이미지 파일

index.html : HTML 파일

manifest.json : 사용자 화면(UI) 관리 파일

 

src 폴더

React를 통해 HTML을 만드는 Virtual DOM이 들어가는 폴더

App.js : jsx코드를 통해, 기본적인 앱을 작성하는 파일

index.js : App.js 코드를 가져와, public/index.html에 넣는 역할을 하는 파일

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// App.js에서 작성한 코드 불러오기
import App from './App';

import reportWebVitals from './reportWebVitals';

// App작성코드 렌더링해서 'public/index.html'의 id가 'root'인 곳에 붙여넣기
ReactDOM.render(
  <React.StrictMode>
    <App />
  <React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();




index.js : App.js를 가져와, public/index.html에 넣기

 

App.js

import logo from './logo.svg';
import './App.css';


// App 함수 생성

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}


// App 함수 모듈로 내보냄

export default App;



// index.js : App.js를 가져와, public/index.html에 넣기

 

---

JSX란? / 사용법

[React.js] JSX란?

React.js는, JSX 문법을 사용합니다.

---

컴포넌트란?

부분적인 HTML 코드로, React가 이것을 모아 전체적인 웹페이지를 만든다

 

컴포넌트 만들기

// Login.js

// Hello, Component! 라는 문자열을 담은 div 요소 Login 만들기
// 컴포넌트의 첫글자는 무조건 대문자로 작성해야함!
const Login = () => {
  return (
    <div>
        <span>
          Hello, Component!
        </span>
    </div>
  );
};

// 만든 컴포넌트 모듈로 사용하기 위해 내보내기
export default Login;

 

만든 컴포넌트 사용하기

//App.js

// 만든 컴포넌트 불러오기
import Login from "./Login";

// 불러온 컴포넌트 사용하기
function App() {
  return (
      <Login/>
  );
}

export default App;

 

출력결과

---

React의 대표적인 기능 state, props (React Hook 사용) 

 

 

state란?

React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거역할

state가 변경되면, React가 이를 감지하고 바뀐 정보에 따른 화면을 표시해준다.

 

state 만들기 ( React Hook - useState )

// React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.

import { useState } from "react";

// const [state, state변경함수] = useState(기본 state값);

const [isLoggedIn, setIsLoggedIn] = useState(false);

 

React Hooks란?

[React] React Hooks란? / 사용법

 

state 변경하기 ( 사용자 반응에 따른 다른 화면 보여주기 )

// 전에 만든 "isLoggedIn" state의 값을 true로 변경한다.

setIsLoggedIn(true);

// ** useState함수를 사용해 만든 "state 변경 함수"를 사용하여야 한다.

 

state의 특징

state는 어디에서든지 사용가능하다.

하지만 컴포넌트는 시간이 지나고, 앱이 커질수록 점점 많아지므로

점점 관리가 어려워지는 단점이 있다?

 

props란?

React에서 컴포넌트를 사용할때,

컴포넌트간의 데이터를 전송할 수 있게 해주는 도구

 

props 사용법

// App.js

import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import Home from "./screens/Home";

function App() {
  const one = 1;
  
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            <!-- Home 컴포넌트에 number라는 이름으로 변수 전해주기 -->
            <Home number={one}/>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

 

// Home.js

const Home = (props) => {
    return (
        <h1>number: {props.number}</h1>
    )
}

export default Home;

 

---