[React] React 알아보기

React study/React study

[React] React 알아보기

카누가 좋아요 2023. 10. 17. 22:26

📋 React

사용자 인터페이스를 만들기 위한 JS 라이브러리로, 2013년 페이스북에서 발표한 라이브러리이다.

📍 React의 장점

➡️ 생산성, 재사용성

React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높인다.

데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능하다는 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다.

Component의 재사용과 Hook를 이용한 상태 관리를 활용하여 작은 단위의 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높일 수 있다.

💻 HTML과 JS로만 코드 작성하기

레이아웃을 구성하는 HTML과 UI 내 데이터를 변경하는 JS 로직이 분리되어 있어 코드 파악에 시간이 걸린다.

<body>
  <span id="text"></span>
  <script>
    document.getElementById("text").innerText = "hello world";
  </script>
</body>

💻 React로 코드 작성하기

JSX 문법을 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입이 가능하여 코드가 간단해지고 개발 의도를 파악하기 쉽다.

const App = () => {
  const text = "hello world";
  return <span>{text}</span>
}

➡️ 풍부한 자료, 라이브러리

React는 전 세계적으로 가장 활발하게 커뮤니티 활동이 이루어지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있다.

ex) Fluent UI, Redux, Ant Design, React Hook Form, styled components 등

➡️ 다양한 사용처

React로 웹 애플리케이션 뿐만 아니라 React를 React-Native에 적용하여 안드로이드 및 IOS 애플리케이션 등을 개발할 수 있다.

📋 Create React App (CRA)

CRA는 React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate)이다.

React용 보일러 플레이트는 많이 존재하지만 페이스북에서 직접 만들어서 관리하는 Create React App이 가장 보편적으로 쓰이고 있다.

프로젝트 생성에 필요한 다양한 기능을 명령어 형태로 제공한다.

Node.js는 Create React App으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용된다.

NPM에서는 우리가 사용할 React와 관련된 모듈들이 배포되고 있다.

❓ 보일러 플레이트

여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.

예를 들어, CRA를 통해 생성된 App.js의 경우 우리가 직접 작성할 수도 있지만 웹팩(webpack, 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러) 등을 직접 세팅해주기 때문에 개발자가 더 편하게 사용이 가능하다.

https://1000hg.tistory.com/49

보일러 플레이트(Boiler Plate)란?

웹 개발을 하다보면 의미없는 노동을 할 때가 있습니다. 대표적인 예시로 자바의 Getter, Setter가 있습니다. 캡슐화를 위한 필수적인 작업이지만 저희는 IDE를 통해 직접 입력하지 않고 쉽게 생성합

1000hg.tistory.com

📍 CRA의 장점

1️⃣ 상대적으로 덜 중요한 코드는 노출되지 않게 하고 command를 지원하여 개발자가 온전히 React App 개발에 집중할 수 있게 한다.

2️⃣ 대부분의 모든 브라우저에서 해석될 수 있도록 transcompile을 지원한다.

➡️ Babel

자바스크립트 코드를 변환해부는 트랜스 컴파일러이다.

최신 자바스크립트 문법(ES6)을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있도록 지원한다.

ES6 문법으로 개발한 것을 바벨을 사용하면 ES5문법만 지원하는 브라우저에 알맞게 ES5 문법으로 번역해 주는 역할을 하는 것이다.

또한, JSX 문법으로 작성된 코드를 createElement 함수를 사용한 React 코드로 변환시켜준다.

즉, 브라우저가 이해할 수 있는 형태로 변환시켜 주는 역할을 한다.

➡️ Webpack

자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 툴이다.

SPA 방식에서는 한 페이지 당 JS 파일이 매우 많이 필요하게 될 수 있는데, 이때 사용되는 외부 JS 파일을 import 하고 export 하면서 파일을 분리하여 작성하고, 이후에 webpack을 이용하여 하나의 파일로 합치는 것이다.

➡️ 배포 시 코드 번들링

webpack이나 다른 번들러를 이용해 애플리케이션의 모든 코드를 하나 이상의 번들로 묶으면, 브라우저에서 로드할 준비가 된 상태가 되고, 이를 통해 여러 개의 파일을 하나의 파일로 결합하고 최적화하여 웹 애플리케이션의 성능을 향상시키고, 로드 시간을 개선할 수 있다.

https://ooeunz.tistory.com/133

[React.js] Babel / Webpack: 트랜스 컴파일러와 JS 모듈 번들러

React.js를 공부하다 보면 필연적으로 한 번씩 듣게 되는 키워드가 바로 바벨과 웹팩입니다. 이 둘에 대해 자세히 알지 못하더라도 당장 리액트 개발을 하지 못하는 것은 아닙니다. 왜냐하면 리액

ooeunz.tistory.com

* Create React App을 꼭 사용해야 하는 것은 아니고, HTML에 직접 script를 추가해서 사용해도 된다.

(출처: https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html)

<!-- ... 다른 HTML ... -->

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <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>

  <!-- 만든 React 컴포넌트를 실행. -->
  <script src="like_button.js"></script>

</body>

📋 React 프로젝트 생성하기

git bash에서 다음과 같은 명령어를 입력하여 React 프로젝트를 생성할 수 있다.

npx create-react-app <디렉토리명>
cd <디렉토리명>
npm start

1️⃣ npx는 npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어이다.

위의 경우 create-react-app 이라는 패키지를 한 번만 내려 받아 실행한 것이다.

2️⃣ cd 명령어를 사용하면 <디렉토리명> 으로 이동한다.

3️⃣ npm start를 입력하면 Node.js 서버를 이용해 현재 디렉토리의 프로젝트를 실행한다.

📍 자주 사용하는 명령어

npm install
npm install <패키지명>
npm start
npm build

1️⃣ npm install

package.json에 정의된 dependency(의존성 패키지) 들을 설치한다.

2️⃣ npm install <패키지명>

npm 서버로부터 원하는 특정 패키지를 내려받는다.

3️⃣ npm build

프로젝트를 빌드하는 데 사용되는 명령어이다. 배포 환경에서 사용할 파일을 압축 형태로 만들어 주는 명령어이다.

* Ctrl + C 키를 눌러 명령을 중지할 수 있다.

📋 설치한 라이브러리를 프로젝트 내에서 불러오기

import "패키지명"
import something from "패키지명"
import {a, b} from "패키지명"
import * as something from "패키지명"

1️⃣ CSS 처럼 import 하는 것만으로 바로 역할을 할 수 있는 라이브러리일 경우 패키지병을 바로 import 하면 된다.

2️⃣ 패키지를 불러와 활용할 때에는 할당할 이름을 작성해 준다.

3️⃣ 패키지 내에서 일부 메소드나 변수만 가져올 때는 구조분해를 하여 가져오는 것이 효율적이다.

4️⃣ 패키지에 default로 export 되는 객체가 존재하지 않을 경우 * as 이름으로 불러올 수 있다.

📋 React와 Javascript의 차이점

📍 브라우저에 데이터가 저장되는 방법

➡️ JS

자바스크립트에서 사용자 데이터는 일반적으로 브라우저 자체에서 만들고 관리하는 DOM(문서 객체 모델)에 저장된다. 즉, 아래와 같이 텍스트 박서를 정의하고 사용자가 입력하면 해당 내용이 브라우저에 저장된다.

<input type="text" id="input=member" />

사용자가 input에 값을 입력할 시 개발자는다음과 같이 먼저 DOM에서 값을 찾은 다음 해당 입력 상자에 값을 수동으로 입력해야 한다.

const input = document.getElementById("input-member");

but 만약 input의 id가 변경된다면 해당 id를 사용하는 모든 코드를 다시 수정해야 하므로 관리가 번거롭다.

➡️ React

React에서는 제어 컴포넌트를 이용해 사용자 입력 시 JS 객체의 텍스트 값을 설정하므로 먼저 상태를 정의해야 한다.

const [member, setMember] = useState("");

그리고 HTML 코드에 입력이 변경될 때마다 상태가 바뀔 수 있도록 코드를 작성해 준다.

JS 때처럼 id를 별도로 관리할 필요가 없어 코드를 관리하기가 편하다. 또한, 현재 앱의 상태를 저장하기 위해 DOM에 의존하지 않는다는 장점이 있다.

<input type="text" value={member} onChange={e => setMember(e.target.value)}>

📍 UI 업데이트 방법

목록에 새 항목을 추가할 때 UI를 업데이트하기 위해 JS와 React에서 코드를 작성하는 방식을 비교해 보자.

➡️ JS

텍스트 박스 옆에 버튼을 추가한 뒤 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾는다.

<input type="text" id="memeber" /><button id="add-button">회원 추가</button>

const addButton = document.getElementById("add-button");

그리고 버튼에 click 리스너를 설정하여 DOM에서 목록을 찾고 추가할 새 항목을 만든 후 목록 끝에 추가하는 로직을 담은 콜백 함수를 작성해 주면 된다. 복잡하다.

addButton.addEventListener("click", function() {
  .....
});

➡️ React

React 앱에서는 자바스크트 변수의 전체 상태를 유지한다.

그리고 변수의 각 항목을 매핑하여 그에 대한 목록 요소를 반환하여 JSX에 표시한다.

const [members, setMembers] = useState(["사람1", "사람2", "사람3"]);

<ul>
  {members.map(member => (
    <li key={member}>{member}</li>
  ))}
</ul>

그 다음 버튼을 누르는 기능을 onClick으로 버튼 자체에 속성을 추가한다.

<button onClick={addMember}>회원 추가</button>

이제 setMember 함수와 전개 연산자를 사용해 기존 항목에 새 항목을 추가하면 된다.

이렇게 하면 React는 목록이 변경된 것을 자동으로 등록하고 UI를 자동으로 업데이트한다.

function addMember() {
  setMembers([...members, "새로운 회원"]);
}

* 출처가 따로 표기되지 않은 부분의 내용들은 엘리스 10/16 React 기초, JSX, 컴포넌트에서의 수업 자료들을 참고하였습니다.