React

다른 프레임워크에서 mvc구조를 사용하는데에 비해 리액트는 flux 구조를 사용한다. ?

Action -> Dispatcher -> Store 단방향 데이터 흐름이다. 

리액트가 담당하는 부분은 mvc 중 view 뿐이다. 이것이 장점인 이유는 상황에 따라 다른 라이브러릴를 섞어서 쓸 수있기 때문이다? (ex. Redux)

 

또한 가상 돔(Virtual DOM)을 활용하여 렌더링 시간을 줄여줄 수 있다. 정보가 바뀔때마다 전체를 다시 로드해오면 시간이 많이 걸리고 비효율적이지만리액트는 필요한 페이지만 그때그때 다시 가져오는 것이다... (SSR : server side rendering, CSR(Client Side Rendering))어떻게 이렇게 하느냐!??!?각각의 UI를 Component로 묶어 캡슐화해서 가져오기 때문이다.... .그렇기때문에 코드의 재사용성도 높아진다.

 

이렇듯 리액트로는 SPA(Single side application)을 구현할 수 있 다 .

 

리액트에서 중요한 요소: Component(=사용자 정의 태그), props

 

 

생활코딩에서 강의를 들어보았다!!

https://opentutorials.org/module/4058/24737

컴포넌트 제작 - React

 

react에 여러 버전이 있는 것 같은데... 나는 강좌를 따라서 react create app을 설치했다.

 

react create app을 설치하기 위해서

npm이 필요한데, 이걸 위해서 node.js를 설치한다(node.js 사이트 ㄱㄱ). 참고로 안정적인 버전이 좋다고 생각한다. 

 

그후cmd에서npm install -g create-react-app

요렇게 해서 설치 ㄱ

 

IDE는 VSCODE를 사용했다. 터미널에서 명령어를 활용,

폴더를 만들고, cd(change directory)라는 명령어를 통해 개발환경을 구축한다.

cd 뒤에 해당 폴더를 드래그하면 자동으로 경로설정됨

단, 해당 경로가 D드라이브면 cd쓰면 안되고 바로 걍 D: .... 이런식으로 해야함

경로설정이 되었다면 create-react-app . 이라고 입력하면 자동으로 필요한걸 만들어줌

 

npm run start 를 터미널에 입력함으로써 샘플앱을 서버로 실행가능.

 

npm run build를 입력하면, build라는 디렉토리를 생성하고, 그 안에 배포판 파일을 생성한다. 

실제 프로덕션 환경에서 사용되는 서비스을 만들기 위함이다. (작업환경보다 용량이 훨씬 작음 = 빠름. 성능좋아짐)

 

이렇게 빌드된 결과물을 서버에서 서비스하기 위해서는

You may serve it with a static server:

  npm install -g serve
  serve -s build

 

이러한 명령어가 필요하다.

 

현재 리액트의 개념, 간단한 흐름과 환경을 설정하는 법을 알아보았다.