React란?
메타에서 개발한 오픈소스 자바스크립트 라이브러리로
프론트엔드 개발자들 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고있다.
(그중 가장 많은 다운로드 수를 보유하고 있다.
프론트엔드 개발자를 지향한다면 리액트는 거의 필수적으로 공부하는 것이 좋을 듯 하다.)
리액트를 사용하여 웹을 개발하기 전에 우선적으로 리액트를 사용하기 위한 준비를 과정을 알아보겠다.
리액트 사용을 위한 준비
1. Node.js 다운로드
Node.js를 다운로드하는 이유가 무엇이냐
React를 사용하기 위해서는 npm이라는 것이 필요한데
Node.js를 다운로드 받게 되면 npm이 자동적으로 설치가 되기 때문에
Node.js를 다운로드 하는 것이다.
2. VisualStudioCode 다운로드
이건 코드 작성을 위한 준비라고 보면 된다.
이렇게 되면 다운로드는 전부 다 하게 된다
다음으로는 React를 사용하기 위한 폴더를 생성하는 것이다.
이런식으로 리액트 사용을 위한 폴더를 생성하면 된다
그 다음으로 폴더를 Shift+우클릭하게 되면
PowerShell이라는 것을 열 수 있게 되는데
PowerShell에서 다음과 같은 명령어를 치게 되면
React사용을 위한 준비과정이 마무리가 된다.
npx -create-react-app 프로젝트명
그 후 VisualStudioCode에서 새로 생성된 폴더를 열면 된다.
여기까지가 React를 사용하기 위한 준비과정이 끝나게 된다.
마지막으로 React의 장점에 대해서 알아보도록 하겠다.
1. React를 사용하여 SPA(Single Page Application)사이트를 만들 수 있다.
SPA는 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미한다.
SPA가 ‘단일 페이지 애플리케이션’이라고 일컬어지지만, 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않습니다. SPA(Single Page Application)도 여러 페이지가 존재한다. 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미한다.
그렇기 때문에 페이지 전환을 할 때도 깜빡임 없이 부드럽게 넘어가 사용자의 몰입도를 높여준다.
짧게 요약해서 페이지 전환을 부드럽게 해주는 것라고 보면된다.
2. Component를 사용하여 HTML의 재사용이 매우 편리하다
반복되는 HTML을 Component함수로 정의하여 사용하기가 편리하다
이렇게 해서 재사용이 매우 편리하다.
3. State와 같은 기능을 사용하여 HTML에 바로바로 데이터를 반영시킬 수 있다.
State를 사용하게 되면 데이터가 변경될 시 HTML이 자동으로 재랜더링이 되기 때문에
자주 변경되는 데이터를 State를 사용하여 효율적으로 관리할 수 있다.
지금까지 React를 사용하기 위한 준비과정과
React를 사용하면 좋은 이유에 대해서 알아보았다.
다음 블로그부터는 본격적으로 React를 사용하여
웹 사이트를 만들어보도록 하겠다.