0.React 기본개념

React

리액트는 3가지 대표적인 특징을 가지고 있습니다.

1. JSX 문법

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게

도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줍니다.

class HelloMessage extends React.Component { render() { return ( div> Hello {this.props.name} /div> ); } }

class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } }

마크업 개발은 저렇게 하나의 div만 있는 것도 아니고 복잡할텐데, 지금처럼 리액트를 짜게 되면 개발자는 매우 힘들 것입니다. 하지만 JSX의 사용으로, 리액트의 사용성은 굉장히 증가했다고 할 수 있습니다.

2. Component 기반

리액트는 컴포넌트 기반 라이브러리 인데요, 컴포넌트 기반이라 함은 기존의 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할 해서 코드의 재사용성과 유지보수성을 증가시켜 줍니다.

아주 긴 HTML 코드를 부분 부분 컴포넌트로 나누어 그 부분의 파일만 수정하면 됩니다.

3. Virtual DOM

가상 돔은 기존 DOM*의 한계를 탈피하기 위해서 나온 대안입니다.

DOM이란? Document Object Model 단어 그대로 문서 객체 모델 입니다.

우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델이라고 생각하면 될 것 같네요.

DOM의 구조는 트리 구조로 되어 있습니다. HTML 구조와 같죠.

만약 프로그래머가 어떤 DOM의 요소를 하나 수정하는 함수를 만들고 실행 시킬때, 렌더트리를 재생성하고(그러면 모든 요소들의 스타일이 다시 계산 됩니다.) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠.

이게 어떤 문제가 있냐면, 우리가 복잡한 SPA 개발을 통해서 DOM의 요소를 굉장히 많이 수정한다고 할 때, 불필요한 연산이 매번 일어난다는 것이죠.

 

 

우리는 렌더트리가 매번 재생성 되는것을 좋지 않게 생각하기 떄문에, 가능하면 한번에 모든 작업이 진행되는 것을 더 선호할 것입니다.

 

 

 

그 문제를 해결하기 위해 가상 DOM이 등장 하였습니다.

 

DOM자체가 추상화 개념인데, 거기에 한번 더 추상화를 한 것이 가상 DOM입니다.

가상 돔은 변화를 가상 돔에서 미리 인지해 변화시킵니다. 이 작업은 실제 DOM이 아니기 때문에 렌더링도 되지 않고 연산 비용이 비교적 실제 DOM보다는 적습니다. 그 가상 DOM의 변화를 마지막에 실제 DOM에게 던져주어, 모든 변화를 한번에 렌더링 되게 합니다.

그런데 이러한 생각은 우리는 충분히 가상 DOM을 사용하지 않고도 할 수 있었을 텐데, 왜 굳이 가상 DOM을 쓰는걸까요?

 

 

만약 직접 DOM을 업데이트하게 된다면 그 부분만 업데이트하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데, 가상 돔은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜줍니다.

 

또한, 변경하려는 DOM이 변경되었는지, 변경되지 않았는지에 대한 각 동기화 정보를 알고 있을 필요가 없음과 동시에 하나로 묶어서 작업해주기 떄문이죠.

결론적으로 가상 DOM을 사용하는 이유는, 실제 DOM을 직접 변경할 수는 있지만, 그 작업이 굉장히 값비싼 작업이기 때문에, 가상 돔에서 미리 최적화를 한 번 해준다는 것 입니다.

Jquery와 같은 CDN으로 리액트를 사용하면 리액트를 100%활용할 수 없습니다. 여러 가지 라이브러리를 동시에 사용하기 위해, lint의 도움도 받지 못하고 에디터의 도움을 제한적으로만 받을 수 있기 때문입니다.

webpack이나 parcel같은 번들러를 사용해 모든 모듈이나 여러 라이브러리를 동시에 합쳐서 하나의 .js파일로 내보냅니다.

또한 리액트 파일은 JSX 문법으로 작성되거나 최신 JS문법으로 작성되기 때문에, babel을 사용해서 브라우저 호환성을 생각해야 합니다.

그래서 facebook이 강력한 리액트 개발 도구를 지원해 주고 있는데, 바로 create-react-app입니다.

 

 

연습했던 커맨드

425 git clone https://github.com/facebook/create-react-app.git

426 ls

432 cd workspace/

433 cd create-react-app/

434 npm install -g yarn

435 yarn -v

436 ls

438 pwd

439 ls

440 yarn eject

441 ls

442 cd my-app/

443 yarn eject

444 CD ..

445 cd ..

446 yarn

447 cd my-app/

448 cd ..

449 cd ..

450 cd ..

451 ls

452 mkdir reactStudy

453 ls

454 cd reactStudy/

455 git clone https://github.com/yoonghee/reactStudy.git

456 ls

457 cd reactStudy/

458 git init

459 git add README.md

460 vi README.md

461 ls

462 touch README.md

463 ls

464 echo "# reactStudy" >> README.md

465 git add README.md

466 git commit -m "first commit"

467 git remote add origin https://github.com/yoonghee/reactStudy.git

468 git push -u origin master

 

 

npx create-react-app my-app

설치가 끝나고 리액트 앱이 만들어졌습니다.

yarn start (npm start)

yarn build (npm run build)

yarn test (npm run test)

yarn eject (npm run eject)

이 네 개의 명령어로 리액트 앱을 개발모드에서 개발하고, 리액트를 최종 배포 버전으로 배포하고, 테스트 하고, 설정을 추가하는 등의 명령을 할 수 있습니다.

CRA 폴더 안에서 가장 중요한 폴더인 public과 src 폴더를 알아보겠습니다.

익숙하지 않은 문법에 관해서는 - <https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes>에 관해서 공부하면 됩니다.

나머지 폴더들이 어떤 역할을 하는지 알고 싶다면 npm과 git에 관해서 공부하시면 됩니다.

public:

가상 DOM을 사용하는 리액트는 실제 DOM이 필요합니다. 즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요하다는 것인데, 바로 그 빈 껍데기가 존재하는 폴더입니다.

• favicon.ico: 페이지 아이콘 이미지 파일입니다.

• index.html: 가상 DOM이 들어가기 위한 빈 껍데기 html 파일입니다.

• manifest.json: 웹 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역(예:휴대기기 홈 화면)에 웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목을 지시하고, 시작 시의 모습을 정의할 수 있는 JSON 파일 입니다.

src:

리액트 개발이 이루어지는 메인 폴더입니다. 앞으로 우리는 src폴더를 주로 수정하고 src 폴더에 있는 파일들을 작성하는데 많은 시간을 보내게 될 것입니다.

• index.js와 App.js가 어떻게 동작하는지만 알아도 리액트가 어떻게 동작하는지 알 수 있습니다.


이 코드는 App.js에서 생성된 리액트 코드를 index.js에서 불러온 후, public에 있는 index.html의 id가 root인 곳에다가 넣는 코드입니다.


이 코드는 리액트 코드를 생성하는 부분인데요.

먼저 App이라는 클래스를 생성한 후, 리액트 컴포넌트를 상속받습니다. 그렇게 되면 리액트 컴포넌트 메소드를 사용할 수가 있게 됩니다.

render() 메소드는 리액트 컴포넌트인데, 화면에 html 뷰를 생성해주는 역할을 합니다. return으로 받는 값들은, 나중에 html 코드로 바뀌게 됩니다. 그렇게 생성된 App 클래스를 export 문법을 이용해서 내보냅니다.

<https://medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-part-3-a76a727447d3>

 

 

리액트가 필요한 이유?

프론트엔드 라이브러리 / 프레임워크

단순 정적 페이지 : 자바스크립트 없이 HTML과 CSS로 만들면 됨

+자바스크립트 : 유저의 행동흐름에 따른 동적 화면

하지만 요즘의 웹은, 단순한 웹 페이지가 아닌 웹 애플리케이션입니다.

브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있음

그런데 어떠한 유저인터페이스를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리해줘야 합니다.

 

<div>

<h1>Counter</h1>

<h2 id="number">0</h2>

<button id="increase">+</button>

</div>

var number = 0;

var elNumber = document.getElementById('number');

var btnIncrease = document.getElementById('increase');

btnIncrease.onclick = function() { number++; elNumber.innerText = number; }

 

우리가 버튼을 눌러서 저 숫자 0값을 바꿔주려면 각 DOM 엘리먼트에 대한 래퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해야함

만약에 jQuery를 사용하게 된다면, document.getElementById 대신에 $('#number') 이런식으로 DOM을 가져오게 됨

사용자와 인터랙션이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요하지 않습니다.

하지만 프로젝트 규모가 커지고, 정말 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는건 진짜 진짜 갈수록 힘든 일 일것입니다.