React란 무엇인가
React는 페이스북에서 제공하는 자바스크립트 UI라이브러리이다.
React는 컴포넌트 기반이다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다.
React를 사용하는 이유
프로젝트의 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나 직접관리 하기 힘들어진다.
React를 사용하면 사용자와 상호작용 할 수 있는 interactive한 UI 구현에 집중할 수 있다.
React 작동방식
React는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성한다. 이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 한다.
Virtual DOM
복잡한 SPA에서는 DOM 조작이 많이 발생한다. 그 때마다 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적으로 되기 쉽다.
하지만 Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다. Virtual DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달한다.
React and the Virtual DOM 참고영상
React의 특징
- RealDOM 대신 VirtualDOM을 사용함
- 서버 사이드 렌더링을 지원함
- 단방향 데이터 흐름 또는 데이터 바인딩을 따름
- UI 구성 요소를 재사용할 수 있도록 개발할 수 있음
props와 state
props와 state 모두 JavaScript 객체이다. 두 가지 다 렌더링 결과에 영향을 주는 정보를 가지고 있지만, component와 관련된 기능면에서 차이가 있다.
props는 함수 매개변수와 같이 component 요소로 전달됩니다. state는 component 안에서 관리되고 사용할 변수 선언과 비슷하다.
참고
https://appear.github.io/2018/10/20/REACT/react-translate-01/
https://m.blog.naver.com/z1004man/221878557383
https://velopert.com/3612
https://valuefactory.tistory.com/544
