React Study Note

Ginie·2020년 11월 24일
0

React

목록 보기
1/1
post-thumbnail

👩‍🏫 리액트는 어떤 상태가 바뀌었을때 상태에 따라 DOM을 변경하는 것이 아니라
다 밀어버리고 다시 만들어서 보여준다.

🙍‍♀️ 바뀔 때마다 초기화 시키고 다시 만들어서 보여주면 느려지지 않을까요?
👩‍🏫 리액트는 "Virtual DOM" 이라는 것을 사용한다.
🙍‍♀️ 그게 뭔가요?
👩‍🏫 가상의 돔인데 브라우저에 실제로 보여지는게 아니라 메모리에서 가상으로 존재하는 돔이야. 걍 자바스크립트의 객체중 하나지. 작동 성능은 브라우저에 돔을 보여주는 것보다 속도가 매우매우 빠르단다. 리액트는 가상돔(Virtual DOM)에 렌더링 하고 브라우저랑 비교해서 바뀐 부분을 바꿔준단다.

자 그럼 너무 멋진 React를 시작해 보자

준비물 : Node.js , Yarn , Visual Studio (그냥 아무 코드 에디터나 상관 없음) , Git bash

Node.js : 자바스트립트 런타임인 노드js로 Webpack (여러 파일을 한개로 결합해줌), Babel (jsx같은 새로운 자바스크립트 문법을 사용하게 해줌)같은 도구들이 만들어졌음
나중에 웹팩이랑 바벨도 더 깊게 파야겠다📖

Yarn : npm에 익숙하다면 생략 가능
하지만 얀 발음이 너무 귀여워서 이거 쓰고싶다 얀얀!

새로 프로젝드를 만들어 볼까!

  1. 다들 명령 프롬프트 일명 cmd를 키자

  2. npx create-react-app my-app (my-app : 프로젝트 폴더명) 리액트를 만들어주는 마법의 문장⭐
    나는 처음에 my-app 도 그대로 따라 쳤고 다 생성 되고 나서야 알았다 폴더명인걸 지금 생각하면 진짜 쌩 초보였다 정말

  3. cmd에 cd my-app > code . 그럼 짜잔 하고 VS Code가 뜬다.

  4. VS Code에서 리액트 웹페이지를 띄워보자

  5. 터미널을 열고 얀~ start! yarn start

만약 에러가 뜬다면 .env 파일을 추가하고 SKIP_PREFLIGHT_CHECK=true 를 적고 다시 실행 시켜보자

Modern React Textbook

profile
느리지만 꾸준한 프론트엔드 주니어 개발자 🐢

0개의 댓글