사용자 인터페이스를 구축하는데 사용할 수 있는 자바스크립트 라이브러리이다.
리액트를 이용해서 선언적이면서 컴포넌트 기반으로 편리하게 UI를 개발할 수 있다.
택시를 탔을 때의 상황을 예시로 보면
절차적 : 앞으로 두블록 직진하다가 우회전해주세요 > 첫번째 신호등에서 좌회전 해주세요 > 다리를 건널때 까지 쭉 직진해주세요 > 소방서가 보이면 우회전하고 300m 앞에서 내려주세요
선언적 : "최종목적지"로 가주세요
UI를 선언하면 DOM 조작은 React가 수행
React가 UI를 자동으로 업데이트하는 과정을 효율적으로 하기 위한 개념
React가 내부적으로 가지고 있는 'DOM의 미니어처'
실제 브라우저의 DOM을 조작할때,
- 브라우저는 DOM을 계산하고 CSS를 계산하고,
- 화면상에서 DOM이 그려질 위치를 계산하고(Layout),
- 브라우저에 실제 픽셀을 그림(Paint)
이 모든 과정을 매 DOM 조작마다 수행하기에 DOM 조작이 많아지면 브라우저가 처리해야할 연산량이 늘어남 >> 성능에 악영향
그래서 리액트는 DOM의 미니어처인 virtual DOM을 통해 필요한 DOM 조작을 계산한뒤, 한번에 DOM을 조작
layout, paint 과정을 거치지 않아서 상대적으로 조작에 부담이 덜하다. 연산량감소 > 성능향상
React가 내부적을 DOM을 조작하는 과정에서 브라우저에 발생하는 연산의 양을 줄이는 방식을 통해서 성능을 개선하기 위한 방법
컴포넌트
: 독립적이고, 재사용할 수 있는 소프트웨어 구성 요소 (하나하나의 레고 블럭)
프론트엔드에서 컴포넌트란? 독립적이고 재사용 가능한 UI 단위
장점
- 재사용 가능 >> 유지보수에 용이
- 컴포넌트간 계층(부모-자식)관계를 형성가능 >> 컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있다
- 해당 UI가 어떻게 구성되었는지 파악하기 용이 >> 가독성 향상, 유지보수에 용이
클래스 컴포넌트
- 자바스크립트 Class 문법을 이용해서 컴포넌트를 선언하는 방법
- state, lifeCycle등의 기능을 사용할수 있어서 초창기에 많이 사용
- Class의 문법과 동작이 복잡하다는 단점 존재
함수 컴포넌트
- 자바스크립트 함수 문법을 이용해서 컴포넌트를 선언하는 방법
- 직관적이고 사용하기 쉬움
- state, lifeCycle등의 기능을 사용할 수 없었음
- React16.8버전에서 Hook이라는 개념이 등장하며 state, lifeCycle등 기능 사용가능
- 현재 생태계에서 함수 컴포넌트가 주류를 이루고 있음
4.1 JSX의 기원
HTML에서 마크업을 하고, 자바스크립트에서 로직을 작성하는 방식이 불편하다고 생각
마크업과 로직을 한번에 작성할 수 있는 방법을 고민
그 결과 자바스크립트 내에서 HTML을 마크업 할 수 있도록 한 JSX라는 문법이 만들어짐
자바스크립트에서 정식으로 채택한 문법은 아니며 단지 리액트에서 편하게 쓰기 위한 문법
그래서 브라우저에서는 해석할 수 없음JSX로 작성한 코드는 Babel(컴파일러, 번역기)를 통해서 React.createElement() 함수로 변환됨
4.2 JSX의 특징
JSX는 자바스크립트의 값이다
특정한 변수에 이 값을 담을 수 있고 함수에 인자로 전달할 수 있고 함수의 리턴값으로도 가능
JSX는 자바스크립트 값을 포함할 수 있다 {자바스크립트값}
값이 담긴 변수 뿐 아니라 함수에서의 리턴값도 받을 수 있다
이때 if문 for문 등의 구문들은 값이 아니므로 JSX안에서 사용불가
JSX안에서 tag의 속성을 정의할 수 있다
HTML보다 자바스크립트에 더 가까운 문법이기에 속성명 사용시 camelCase로 사용
JSX안에서 바로 이벤트리스너를 등록할 수 있다
on + 이벤트명으로 tag에 바로 부착
JSX는 JavaScript object 형태로 inline style을 표현한다
스타일 변수를 선언하고 key: "value" 형태로 stlye 부여
JSX안에서는 반드시 클로징 tag를 부여해야 한다
모든 JSX 태그는 하나의 부모 태그로 감싸져 있어야 한다
React.Fragment : 실제 브라우저 상에는 추가되지 않으면서 JSX를 그룹화 하기 위해서만 사용할때 사용하는 태그
<React.Fragment></React.Fragment>
or <></>
로 표현 가능