[React] 기초

1. React란?

React는 페이스북에서 2011년에 개발하고 제공하는 라이브러리다.

리액트의 데이터구조는 단방향 데이터 흐름을 가지고 있다. (리덕스)

 

리덕스는 인벤토리 저장소 같은 것이다.

리액트의 랜더링

리액트는 보여주는것에 집중된 라이브러리이다.

 

2. 가상돔

(1) 변화가 일어나면 변화된 버전의 가상돔으로 바꿔줌 - 데이터가 업데이트 되면 UI를 가상돔에 리랜더링 한다.

(2) 변화전의 가상돔과 변화된 가상돔을 비교해서 바뀐 부분만 실제 돔에 리랜더링 적용한다.

 

3. 장점

(1) 일단 유명하고 많이 사용한다. -- 유명한 라이브러리

(2) 자바스크립트만으로 개발할때 보다 편하고 태그를 다루기 쉽다.

(3) 재활용성이 높다.

(4) 불편하게 태그 선택자를 사용할 일이 적다.

(5) html과 js파일이 많아질수록 관리하기가 힘든부분을 보완해준다.

(6) 새로고침 하지 않고 페이지를 동적으로 보여줄 수 있다.(웹을 모바일 앱처럼)

(7) JSX를 사용해서 html과 js를 합쳐서 컴포넌트로 만들수 있고 태그의 이름을 자유롭게 지을수 있다.

  * JSX : 문자열도 아니고 html도 아닌 JS XML 웹응용 프로그램의 구조를 만들기 위한 표준 마크업 언어

(8) html 파일과 js파일을 따로 만들필요가 없다. 모든 파일을 js파일로 만들수 있다.

 

4. 시작해보기

 리액트 시작 명령어(터미널)

npx create-react-app 폴더이름

입력하면 폴더가 하나 생성되는데 거기에 React를 쓰면 된다.

폴더안에 src폴더를 들어가보면 app.js와 index.js가 있다.

app.js : html과 js를 합친 컴포넌트, 컴포넌트는 하나의 태그로 무조건 감싸서 반환해줘야 한다.

index.js : document.getElementById('root') -> 리액트가 동적으로 내용을 그려줄 위치

ReactDOM.createRoot(첫번째 매개변수 그려줄 컴포넌트, 그려줄 위치) : 시작점 생성

리액트는 index.html 하나로 싱글페이지 어플리케이션 이다.

페이지가 하나고 그 한개의 페이지의 정보만 동적으로 표현해준다.

 

편리한 익스텐션 

es7 react

redux

graphQL-native snippents