리액트 자습 1일차 : 리액트를 사용하는 이유

Javascript를 사용할 때 이벤트 핸들러를 사용해서 DOM을 자유자재로 다뤘었는데 규모가 커지다보면 여기저기 이벤트 핸들러에서 DOM을 참조하기 때문에 유지보수가 어려워진다.

리액트는 상태가 바뀌었을 때 어떻게 업데이트할지 규칙을 정하는게 아니라 모든걸 날리고 다시보여주면 어떨까하는 발상에서 탄생.

그런데 모두 날리고 다시 생성하면 속도가 느릴 것. 근데 리액트에서는 Virtual DOM을 사용하면서 속도를 올림. 메모리에 있는 Virtual DOM과 real DOM을 비교해서 차이점을 감지한 뒤 실제 DOM에다가 패치하는 방식. (필요한 변화를 반영)

필요한 변화만 발생시키게 되면서 업데이트를 어떻게 할지 고민을 안하면서 빠른 성능을 나타낼 수 있었다.

UI를 어떻게 업데이트 할지X -> UI를 어떻게 보여줄지에 집중할 수 있게 된다.

리액트는 컴포넌트를 사용하는데

컴포넌트는 UI조각이라고 생각하면된다.

작업환경 준비

node.js = 자바스크립트 런타임. 브라우저 외에서도 자바스크립트가 작동할 수 있도록 함.
yarn = node.js를 설치하면 npm이 설치되는데 npm이랑 비슷한 도구. 자바스크립트 패키지를 빠른 속도로 받게 해준다. 생략하고 npm을 사용할 수 있지만. 훨씬 빨라서 추천함.

yarn 공식 홈페이지에서 yarn을 설치해준다.

터미널에서 pwd로 경로를 확인한 뒤 내가 원하는 위치에 있다면(mac에서 기본은 해당 유저 폴더)

mkdir react-tutorial을 입력해서 연습할 폴더를 하나 만들고 cd react-tutorial로 이동한다.

여기에 npx create-react-app begin-react를 입력해서 편하게 react 사용하게 해주는 create-react-app을 다운받는다.

cd begin-react로 해당 위치에 다시 들어간다.

yarn start를 하면 뱅글뱅글 돌아가는 화면이 나온다! 기본 세팅 끝!