ReactJS 공식문서 참고 사이트
1. ReactJS란?
React는 Facebook에서 개발한 Javascript Framework입니다.
자세히는 일반적인 웹 어플리케이션 설계 구조인 MVC모델에서 V (View)를 담당하는
Javascript UI Framework (프론트엔드 프레임워크) 입니다.
2. React의 주요 특징
1. 컴포넌트 (Component)
페이지에 보여줄 내용들을 컴포넌트화 하여
효율적인 소스코드 관리로 인한 유지보수 용이합니다.
2. 효율적인 컴포넌트 갱신
어떤 특정한 데이터가 변하는 컴포넌트가 존재한다면
그 해당 컴포넌트만 재갱신함으로써 효율적인 컴포넌크 갱신 및 렌더링을 합니다.
3. 가상 DOM (Virtual DOM) 사용
가상 DOM이란 직접 HTML문서의 DOM을 핸들링 하지 않고
JSX라는 문법을 통해 기존 DOM 트리구조를 비슷하게 모방해낸
자바스크립트의 객채 (Object)를 통해 DOM을 그려내어
기존의 DOM보다 퍼포먼스적인 면에서 뛰어난 기술입니다.
4. SPA (Single Page Application) 기법 적용
SPA라는 말을 그대로 번역하면 말그대로 페이지가 하나로 이루어진 웹사이트 라는 의미입니다.
앞서 언급한 2번 항목을 바탕으로 특정 경로로 리다이렉트가 발생할때
컴포넌트 내 데이터가 변하는 컴포넌트만 재갱신 함으로써
그 외의 컴포넌트들은 깜빡거리지 않고 (웹페이지 리로드나, 리다이렉트 시 발생하는 현상)
또한 더 나아가 추후에 React-Router와 같은 부가적인 모듈을 사용함으로써
어떠한 요청이 들어왔을때 어떤 컴포넌트를 뿌려줄지를 지정해서 보여줄수가 있습니다.
쉽게 예를들어서 index.html이란 페이지가 존재하고
로그인 폼에 대한 컴포넌트와, 회원가입 폼에 대한 컴포넌트가 있을 때
/Login이란 요청이 들어왔을때 index.html 페이지에 로그인 폼 컴포넌트를 뿌려주고
/Join이란 요청이 들어왔을때 index.html 페이지에 회원가입 폼 컴포넌트를 뿌려줄수 있습니다.
3. React를 시작하기전 알아두면 좋은내용
1. ECMAscript6 (자바스크립트 표준 문법)
React의 문법은 대부분 es6의 문법을 기반이 되고,
React의 레퍼런스 도큐먼트또한 대부분 es6문법으로 작성되어 있기 때문입니다.
* JAVA의 객체지향 개념이 잘 잡혀있으시면 사실상 es6을 따로 깊게 공부하지 않아도 눈치껏 계속 React를 사용하다 보면 다 알게되실거라 생각합니다.
2. NPM (Node Package Manager)
Reacct를 비롯한 React에서 사용할 거의 모든 외부 모듈을 npm 혹은 yarn을 통해
설치를 하고 관리함으로써 npm에 관해는 어느정도 아시는게 좋습니다.
3. Webpack, babel
Webpack과 babel은 ECMAScript 문법 기준 상위 버전의 문법을 지원하지 않는 브라우저를 고려해
상위 문법으로 작성된 자바스크립트 코드를 하위 버전으로 트랜스파일링(변환) 해주는 모듈입니다.
이 또한 아는상태로 시작하면 좋을테지만
React는 create-react-app이라는 훌륭한 기능을 제공함으로써
React를 시작하는데 몰라도 큰 문제는 없습니다.
* create-react-app : create-react-app이란 명령어를 통해 기본적으로 디렉토리 구조가 잡혀진 프로젝트 폴더를 생성해줍니다.
(기존에 JAVA Spring을 사용해보셨다면 Spring Legacy Project & Spring Starter Project 정도라고 생각하시면 됩니다.)
4. ReactJS 시작하기
React로 개발하는데 있어 Codepen과 같은 웹사이트내에 개발도구가 존재하는 사이트도 있지만
실제로 개발하고 베포하는데 있어선 개발도구가 필요합니다.
Visual Studio Code라는 개발도구를 이용해서 시작해보도록 하겠습니다.
댓글