리액트에 대해서 리액트는 무엇인지와 어떻게 설치하는지를 공부할 것이다.
우선 리액트는 오픈소스 자바스크립트 라이브러리이다. MPA(Multi Page Application)인 HTML/CSS/JS와 달리, 단일 페이지로 구성된 SPA(Single Page Application) 형식을 지니고 있다. 따라서 반응성이 좋고, UI가 유연하다는 장점이 있다.
또한 리액트는 컴포넌트 기반으로 UI를 독립적인 컴포넌트로 나눠 재사용성이 뛰어나다. 가상돔(virtual DOM)을 사용하므로 실제 DOM 조작을 최소화하여 성능을 최적화한다. 단방향 데이터 흐름으로 데이터 변화를 예측 가능하게 관리한다는 특징들이 있습니다.
리액트 네이티브를 사용하면 모바일 앱 개발도 가능하다. (mac에서는 ios와 안드로이드 개발 모두 가능하다)
리액트 시작하기
원래 리액트 앱을 실행하기 위해서는 웹팩이나 바벨 같은 것들을 설정해야하기 때문에 시간이 오래 걸렸지만, CRA방식을 사용한다면 바로 시작할 수 있다.
바벨은 일부 브라우저에서는 최신 버전의 자바스크립트 문법을 지원하지 않기 때문에, 최신 버전의 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 변환 해준다. 추가로 웹팩은 복잡한 파일들을 압축해서 최적화해주는 역할을 한다.
우선 리액트를 시작하기 위해서는 node.js를 설치해야한다. 리액트는 프론트엔드 라이브러리이지만, npm을 사용하고, node.js기반의 프로젝트 세팅 도구를 사용하기 때문에 node.js가 필요하다.
node.js 설치가 완료된 상태라면, 위와 같이 터미널에서 리액트를 설치할 폴더로 들어간 후에 npx create-react-app [프로젝트 폴더명] 명령어를 통해 설치할 수 있다.
그 후엔 다음과 같은 파일이 생성되고, 이중에서 src는 소스코드들이 저장되는 폴더이다.
그 다음 터미널에서, cd [프로젝트 폴더명] 명령어를 통해 해당 파일 위치로 이동한 다음 npm start 명령어를 입력하면 해당 파일이 실행된다.
여기까지 리액트가 무엇인지와, 리액트를 설치하는 방법과 실행하는 방법을 알아보았다.
