1. 왜 리액트가 많이 사용되는가?
: 웹에서의 interactive가 많아지면서 규모가 커진 상황에서 기존의 방법으로 웹을 개발하고 유지보수하는 것이 힘들어졌다. 이에 대한 해결책으로 다양한 frontend framwork 및 library가 등장했고 그 중 하나가 리액트이다.
즉, 크고 복잡한 웹을 개발하며 생산성 향상과 방대한 데이터의 관리 및 웹의 유지 보수를 편리하기 위한 방법 중 하나로 리액트가 등장했다.
2. 리액트란?
UI(사용자 인터페이스)를 만들기 위한 JS library이다. 리액트는 가상돔(Virtual Dom)을 통해 UI를 빠르게 자동으로 업데이트 해준다. 가상동은 이전 UI상태를 메모리에 저장 후 변경될 UI의 최소 집합을 계산하는 기술이다. 이를 통해 불필요햔 UI 업데이트를 줄여 성능을 좋아지게 한다.
MVC(Model-View-Controller) Architecture와 다르게 리액트는 오로지 view만 담당한다.
3. CRA 설치 후 폴더와 파일의 구성은?
CRA: Creat-React-App, 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다. 리액트는 View만을 담당하기에 개발자가 따로 세팅을 해주어야 하는 부분이 많다. 이는 취향이 맞추어 자유롭게 세팅할 수 있지만 초기 진입장벽이 높다는 단점이 있고 이를 해결하기 위해 등장한 것이 CRA이다.
CRA를 사용하면 하나의 명령어로 리액트 개발환경 구축이 가능하다.
CRA 초기 폴더는 크게 node_modules, public, src가 있고 파일은 .gitignore, package.json, README.md, yarn.lock(package_lock.json)이 있다.
1) node_modules : CRA를 구성하는 모든 패키지 소스 코드가 있다.
2) public : index.html 여기에 중요한!!! <div id-"root"></div>가 있다.
3) src : npm start를 쳤을 때 보여지고 있는 초기 컴포넌트가 있다. (App.js)
4) .gitignore : github에 올릴 때 여기에 기록된 폴더나 파일은 push를 해도 올라가지 않는다.
5) package.json : CRA 기본 패키지 외 추가로 설치된 라이브러리의 패키지 정보 및 버전 정보가 기록되는 파일이다. package.json은 github에 올라가지 않으며 package.json에 기록된 패키지 정보를 통해 다른 개발자들이 npm install을 쳤을 시 해당 패키지를 install해 사용가능하다.
4. Component란? component의 종류는?
component는 재활용 가능한 UI 구성 단위이다.
재사용 가능하며 유지보수에 좋고 가독성이 뛰어나다. 또한 컴포넌트는 다른 컴포넌트를 포함 가능하다. (부모-자식 컴포넌트)
1) class component
2) functional component
두 가지 종류가 있다.
5. JSX란? JSX의 기본특성은?
JSX : Javascript Syntex extension
리액트에서 사용하는 자바스크립트 확장문법으로 자바스크립트와는 전혀 다른 것이다!
- JSX로 작성된 코드는 바벨을 통해 일반 자바스크립트로 compile된다.
- HTML 태그를 사용해 가독성이 좋고 쉽다. 동시에 JS도 JSX 안에서 동작가능하다는 장점이 있다.
- JS와 JSX의 attribute 이름은 다를 수 있다. (ex. class와 className)
- self-closing tag를 가지고 있다.
<div /> - 모든 요소를 감싸는 최상위 요소가 있어야한다. (cf. React Fragments:
<> ... </>)
✔ Fragments는 DOM에 별도의 노드 추가 없이도 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이 있다. 이를 통해 불필요한<div>태그 생성을 막을 수 있다.
