[ React ] React 기초 및 환경설정 가이드

📌  리액트(React) 란? 

리액트는 자바스크립트 라이브러리입니다. 구조가 MVC, MVVM과 같은 다른 프레임워크와는 다르게 오직 View만 처리합니다.

 

 

📌 SPA (Single Page Application) 란 ?

ndex.html하나만 로드하고 실행시키는 구조이며 nodeJs의 Webpack이 이용됩니다. (프로젝트를 생성하면 자동 포함됩니다.)

이때, Webpack이란 ? 어플리케이션을 동작시키는데 필요한 자원(JS파일, CSS, Image 등)을 하나로 묶어 경량화하여 결과물을 만들어주는 도구입니다.

 

 

 

📌 DOM (Document Object Model) 이란 ?

 

DOM은 HTML 문서 구조의 계층을 표현하기 위해 트리 구조로 만들어진 객체이며 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조입니다. 

 

 

 

📌 Virtual DOM 이란 ?

아래의 코드는 JS에서 DOM의 일부분을 변경해주는 코드입니다.

document.getElementById("x").innerHTML = "<a>변경<a>";

 

서버에서 보내는 값에 따라 화면을 동적으로 변화시킨다면 규칙들은 많아지고 이는 관리하기 힘들어집니다. 이때 facebook은 이런 생각을 합니다." View의 상태가 변화했을 때 그 상태에 따라 DOM을 어떻게 업데이트할 것인지 정하는 것이 아니라, 싹 다 날려버리고 처음부터 새로운 것을 보여주자"

HTML에서 DOM을 조작하여 처리할 때 DOM 핸들링 자체는 빠릅니다.

하지만, 웹 브라우저가 DOM의 변화를 감지하고, CSS를 적용 및 처리하는 과정에서 처리시간이 많이 소요됩니다.

 

이때 ! 리액트의 원리인 Virtual DOM이 이 문제를 해결해줍니다.

Virtual DOM은 바뀐 부분만 부분적으로 리렌더링하여 사용하는 방법입니다.

위 사진에서 보시다시피 리액트는 기본적으로 2개의 가상돔 객체를 가지고 있습니다.

⓵ 렌더링 이전 화면 구조를 나타내는 가상돔

⓶ 렌더링 이후 화면 구조를 나타내는 가상돔

 

리액트는 state가 변경될 때마다 리렌더링이 발생하고 이때 새로운 변경내용이 담긴 가상돔을 생성하게 됩니다.

⓵번 가상돔과 ⓶번 가상돔을 비교하여 어떤 state가 변경되었는지를 신속하게 비교하는데 이 과정을 Diffing 이라고 합니다.

이렇게 Diffing하는 과정을 Reconciliation(재조정)이라고 하며 Batch Update 덕분에 굉장히 효율적인 과정입니다.

이때, Batch Update란 변경된 모든 state들을 집단화켜 실제 DOM에 일괄적용하는 방식입니다.

먄약 50개의 항목이 변경되었다면 실제 DOM을 50번 반복수정하는 것이 아닌 한번에 집단화시켜 적용한다는 점에서 효율적입니다.

 

 

 

📌 React 환경설정

✔︎ create-react-app으로 프로젝트 생성하기 (보일러플레이트)

npm create react-app 프로젝트명(react-basic)

✔︎ 프로젝트 시작 및 종료

cd 프로젝트명 --- (프로젝트 최상위로 이동하여 실행)
npm start --- (시작)
ctrl + c --- (종료)

 

✔︎ node.js 버전 확인 (terminal)

node -v

 

✔︎ git에 업로드 되지 않는 파일 : .gitignore

# dependencies
/node_modules
/.pnp
.pnp.js

 

✔︎ dependencies : 모듈(라이브러리) 버전이 명시되는 곳

 

✔︎ package.json의 역할

- spring boot의 <build.gradle>

- spring의 <pom.xml>

 

✔︎ 웹에 대한 간단한 설정 : manifest.json

 

✔︎ 앱을 대표하는 아이콘 : favicon.ico

 

 

✔︎ Git에서 Clone했을 때 실행이 안되는 문제점 해결 방법 (트러블슈팅)

node_modules를 Git으로 업로드되지 않는 파일로 설정하였기 때문에 해야할 설정이 있습니다.

 

git에서 프로젝트를 받았을 때 node_module이 없다면 아래 방법을 사용하세요.

npm install

terminal에서 package.json에 명시된 버전으로 node_module을 재설치하면 됩니다😄

 

 

 

📌 패키지 관리자 종류

1. npm 

자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이며 패키지 설치,  버전 관리 및 종속성 설치/관리를 위한 도구입니다.

자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라는 Getting Started가 많고, 사용빈도가 높습니다.

 

2. npx 

npm에 속해 있는 패키지 실행 도구이며 npm패키지를 실행하고 일시적으로 사용할 수 있도록 해주는 도구입니다.

즉, 프로젝트에 설치된 패키지를 전역적으로 설치하지 않아도 실행할 수 있습니다.

 

3. yarn 

gradle과 비슷한 패키지 관리자이며 npm, npx와는 결이 다른 패키지 관리자입니다.

속도나 안정성에서는 npm과 비슷하지만 버전을 어디에서나 같게 만들어 버그를 줄임으로써 보안을 높였다는 장점이 있습니다.

참고로, yarn을 사용하고 싶다면 yarn 패키지 관리자를 설치해야합니다.

 

 

 

📌 리액트 코드 예시 살펴보기

1. index.js

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

root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
);

 

getElementById키워드를 사용하여 index.html에 id가 root인 값을 얻습니다. 

React.StrictMode는 현재 버전 이전의 예전 기능을 사용할 때 경고를 출격하는 기능으로 클래스형 컴포넌트입니다.

root.render함수는 App 컴포넌트를 화면에 그리게 됩니다.

 

 

2. App.js

function App() {
	return (
    	< >
        </>
    )
}
export default App;

 

return을 통해 JSX 문장을 반환합니다.

export default App 코드로 모듈을 만들어서 빼냅니다.

Index.js파일에서 <App/>로 위 모듈을 사용합니다.