[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션 - 30강 React 입문

드디어 리액트! 노마드코더에서 살짝 다뤄봤긴 했는데 다시 초심으로 돌아가서 차근차근 배워보자! 나는 영상을 보고 내가 기억해야할 만한 것들을 이곳에 기록하겠지만 여기 👉🏻velopert님 블로그에 들어가면 강사님께서 더 자세히 정리해주신 문서가 있다. 참고하도록 하자

리액트는 어쩌다 만들어졌을까?

기존에 우리는 자바스크립트에서 dom을 제어하기 위해 dom select API를 사용해왔다. (ex. document.getElementByID(‘number’)) 그리고 불러온 dom을 또 각각의 이벤트를 주어 동적으로 움직이게끔 만들어왔다. 이것을 그림으로 표현하자면 👇🏻

이런식으로 복잡해지고 유지보수하기도 어려워진다. 그래서 Ember, Backbone, AngularJS 같은 프레임워크가 만들어졌었는데 이들은 자바스크립트의 특정 값이 바뀌면 Dom의 속성도 바뀌도록 연동을 해줘서 업데이트 하는 방식을 간소화해주는 것으로 만들어졌다.
리액트는 조금 다른 방식으로 접근했다. 업데이트를 하는 것이 아니라 다 날려버리고 새로 만들면 어떨까? 그치만 모두 다 날려버리고 다시 처음부터 랜더링 하려면 굉장히 속도가 느려지기때문에 리액트에서는 virtualDOM이라는 것이 존재한다.
virtualDOM이란 가상의 DOM인데, 브라우저에서 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로서 자바스크립트 객체이기 때문에 작동 성능이 훨씬 빠르다.

리액트에서는 상태가 업데이트 되면, 업데이트에 필요한 UI를 메모리에 있는 virtualDOM에 랜더링한다. 그 다음에 리액트 개발팀이 만든 비교 알고리즘을 사용해서 실제 브라우저에서 보여지고 있는 RealDOM과 VirtualDOM을 비교하고 차이점을 감지하고나서 이것을 실제 돔에 Patch 해준다. Patch라는 것은 차이를 확인해서 반영해준다는 것을 의미한다. 이를 통해 정말 필요한 변화만 감지하고 업데이트 하면서 React는 빠른 속도를 지켜낼 수 있게 된다.
또 리액트에서는 컴포넌트가 존재하는데 이는 일종의 UI조각 이라고 볼 수 있다. 이 부분에 대해서는 실제 코드를 작성하며 더 살펴보도록하자.

작업환경 준비하기

음.. 이 과정은 👉🏻velopert님 블로그 를 참고하도록 하자. 그렇지 않더라도 너무 많은 블로그에서 이미 다루고 있으므로 간략하게만 서술하겠다.

1. node.js 설치
2. yarn 설치
3. VSC 설치 (그 외에 text editor 아무거나 됨) 이렇게 설치하고 커맨드창에서 아래와 같이 잘 설치 됐는지 버전을 확인해보자.

   node --version
   yarn --vertion
   

   이상 없이 버전이 v10.13.0이런식으로 잘 나오면 완성.
   이번엔 리액트를 만들고 실행시켜보자.

   npx create-react-app begin-react
   

   begin-react의 자리에는 내가 만들 프로젝트의 이름을 넣어주면 된다. 프로젝트가 잘 만들어졌으면

   cd begin-react
   yarn start
   

   폴더로 들어가주고 그 안에서 yarn start를 해보자. 로컬에서 리액트프로젝트 생성된것이 브라우저에 뜰 것이다.
   
   위와 같이 나오면 셋팅 끝!
   (이 셋팅만 수십번은 해본듯 .. 좀 더 발전좀 해보자) 이제 다음 포스팅부터 react에 대해 본격적으로 배워보도록 한다!

마치면서

오늘은 여기까지..
시청 영상 30강 1~3까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp