리액트는 크게 세가지 특징을 가지고 있습니다.
1. JSX 문법 사용
JSX는 Javascript Syntax Extension의 약자로, 자바스크립트 문법 내에 HTML형태로 정보를 전달하거나 표기할 수 있게하는 기술입니다.
2. Component 기반
기존에 HTML/CSS로 서비스를 제작할 때에는, 서비스의 복잡도에 따라 코드가 굉장히 길어지고 여러번 사용되는 요소 또한 모두 일일이 작성해줘야 했습니다. 리액트에서는 서비스 내에 재사용이 가능한 요소르 컴포넌트 형태로 분리할 수 있어, 개발 과정에서 많은 효율성을 가져다줄 수 있습니다.
3. 가상 DOM
가상 DOM은 추상화된 DOM을 생성하여, 이를 실제 DOM과 비교하여 변경하려는 요소를 감지한 후 변경이 가해진 부분만 변경해줍니다.
초기 개발환경 세팅
리액트 웹 애플리케이션을 개발하는 것에 사용되는 바벨, 웹팩 등이 Node JS(브라우저 밖에서도 자바스크립트를 작성할 수 있는 환경) 코드를 필요로 하기 때문에, node JS를 설치해주어야 합니다.
node JS와 Node기반의 패키지 매니저 npm을 설치합니다
ex> coco 폴더 내에 CRA 기반의 learn-project 프로젝트 생성
Desktop 폴더 내에 coco 폴더 진입
cd Desktop/coco
learn-project 프로젝트 설치
npx create-react-app learn-project
learn-project 프로젝트 진입
cd learn-project
로컬 서버 띄우기
npm start
이런 img 가 나오면 성공~~