👩🏫 리액트는 어떤 상태가 바뀌었을때 상태에 따라 DOM을 변경하는 것이 아니라
다 밀어버리고 다시 만들어서 보여준다.
🙍♀️ 바뀔 때마다 초기화 시키고 다시 만들어서 보여주면 느려지지 않을까요?
👩🏫 리액트는 "Virtual DOM" 이라는 것을 사용한다.
🙍♀️ 그게 뭔가요?
👩🏫 가상의 돔인데 브라우저에 실제로 보여지는게 아니라 메모리에서 가상으로 존재하는 돔이야. 걍 자바스크립트의 객체중 하나지. 작동 성능은 브라우저에 돔을 보여주는 것보다 속도가 매우매우 빠르단다. 리액트는 가상돔(Virtual DOM)에 렌더링 하고 브라우저랑 비교해서 바뀐 부분을 바꿔준단다.
준비물 : Node.js , Yarn , Visual Studio (그냥 아무 코드 에디터나 상관 없음) , Git bash
Node.js : 자바스트립트 런타임인 노드js로 Webpack (여러 파일을 한개로 결합해줌), Babel (jsx같은 새로운 자바스크립트 문법을 사용하게 해줌)같은 도구들이 만들어졌음
나중에 웹팩이랑 바벨도 더 깊게 파야겠다📖
Yarn : npm에 익숙하다면 생략 가능
하지만 얀 발음이 너무 귀여워서 이거 쓰고싶다 얀얀!
새로 프로젝드를 만들어 볼까!
다들 명령 프롬프트 일명 cmd를 키자
npx create-react-app my-app
(my-app : 프로젝트 폴더명) 리액트를 만들어주는 마법의 문장⭐
나는 처음에 my-app 도 그대로 따라 쳤고 다 생성 되고 나서야 알았다 폴더명인걸 지금 생각하면 진짜 쌩 초보였다 정말
cmd에 cd my-app
> code .
그럼 짜잔 하고 VS Code가 뜬다.
VS Code에서 리액트 웹페이지를 띄워보자
터미널을 열고 얀~ start! yarn start
만약 에러가 뜬다면 .env
파일을 추가하고 SKIP_PREFLIGHT_CHECK=true
를 적고 다시 실행 시켜보자