출처 : https://www.npmtrends.com/angular-vs-react-vs-vue
리액트란, 프런트엔드 프레임워크 중 하나 리액트, 앵귤러, 뷰제이에스 중 점유율이 가장 높다.
그림에서처럼 트리에 표시된 노드를 수정하면 오른쪽 트리에 표시된 노드까지 모드 새로 그려야합니다. 수정해야 하는 노드는 3개인데 8개의 노드를 새로 그리니까 비효율적입니다. 그래서 페이스북 개발자들은 게임엔진처럼 다음 장면에 필요한 화면을 미리 그려 두는 방법으로 화면을 빠르게 전환합니다.
React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (이게 view 역할을 담당)
- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되고 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다.
출처: https://goddaehee.tistory.com/296
리액트는 앞에서 말했다시피 컴포넌트로 이루어져 있는데 리액트에서는 컴포넌트를 JSX로 표현합니다. JSX를 사용하면 리액트엔진이 알아서 JSX의 XML 구조를 분석해줘서 복합한 자바스크립트 코드를 사용하지 않아도 편리하게 화면을 구성할 수 있습니다.
상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 어떤 식으로 전달되는지 보겠습니다.
그리고 프로퍼티를 사용하는 방식 중에 특이한게 있는데 해당 컴포넌트 하위에 배치한 노드를 하위 컴포넌트에서 프로퍼티로 접근해서 가져올 수 있습니다.
자 다음으로 컴포넌트 상태 관리하기 입니다. 아까 프로퍼티 특징이 뭐였죠? “컴포넌트 내부에서 값을 바꿀 수 없다. “ 였습니다. 그러면 만약에 값을 바꾸어야하는 경우에는 어떻게 할까요? 그럴 때 사용하는 것이 바로 state입니다.
리액트 컴포넌트는 크게 두가지로 나눌 수 있습니다.
하나는 클래스형 컴포넌트이고, 다른 하나는 함수형 컴포넌트입니다.
클래스 컴포넌트는 state와 생명주기 함수를 포함하고 있고, 함수형 컴포넌트는 다른 이름으로 state가 없는 함수형 컴포넌트(stateless functional component)라고 부릅니다. 함수형 컴포넌트는 state와 생명주기 함수를 사용할 수 없기 때문에 단순한 구조의 UI를 제작할 때 많이 사용합니다.
그 다음은 컴포넌트의 생명주기인데 이건 한번 궁금하시면 따로 찾아보시는 걸 추천합니다.
자 잊을만하면 다시 나오는 용어 프로퍼티가 뭐였죠? 상위 컴포넌트에서 하위 컴포넌트로 전달하는 읽기 전용 데이터 입니다.
그런데 만약 하위 컴포넌트에서 프로퍼티를 변경해야 할 때는 어떻게 해야 할까요? 그래서 상위 컴포넌트가 제공하는 것이 바로 콜백함수입니다. 상위 컴포넌트에서 하위컴포넌트로 프로퍼티를 전달할 때 프로퍼티를 수정할 수 있는 콜백함수도 같이 전달하면 하위컴포넌트에서 프로퍼티 원본을 수정할 수 있습니다.