react란
업데이트:
카테고리: react
React 란?
: 프레임워크가 아니라 라이브러리
- 프레임워크 : 앱을 만들기 위한 필요한 부분을 다 가지고 있음
- 라이브러리: 특정 기능을 모듈화 해놓은 것
⇒ UI 를 렌더링 하기위해 관여하지만, React를 이용하여 앱을 제작할 때 라우팅, 상태관리, 빌드… 을 위해서는 모듈을 가져와야 하기 때문에 react는 라이브러리이다!
리액트 컴포넌트
: 여러 컴포넌트 조각으로 구성되어 있음
하나의 컴포넌트를 여러곳에서 재사용이 가능함
동시에 수정도 가능하다
클래스형 컴포넌트와 함수형 컴포넌트가 존재
브라우저가 그려지는 원리
- DOM 트리를 생성
- 렌더 엔진이 문서를 읽어들여 그것들을 파싱하고 어떤 내용을 페이지에 랜더링할지 결정
- Render tree 생성
- DOM, CSSOM을 결합하는 단계
- 화면에 보이는 모든 콘텐츠의 내용과 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력
- 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보 포함
- Layout
- 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산
- Paint
- 실제화면에 그리기
⇒ 가상 돔으로 문제 해결, 바뀐 부분만 적용을 하고 변경 사항을 한번에 적용한다.
Reconciliation: 바뀐 부분만 실제 돔에 적용을 시킴
리액트 설치하기
npx create-react-app <폴더이름> 으로 설치
react의 기본구조
이름 변경 불가
- public > index.html : 기본템플릿
- src > index.js
src : 리액트 소스의 대부분이 해당 부분에 존재
package.json
- dependencies: 필요한 라이브러리와 버전
- scripts: 실행, 빌드, 테스트… 의 스크립트 명시
- eslintConfig: 문법이나 코드 포맷을 체크하는 것에 대한 설정
리액트 실행: npm run start
SPA
index.html의 #root를 엘리멘트로 잡아준다.
그 엘리멘트 안에서 화면을 꾸밀 수 있게 해준다.
웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가면 표현
화면변경은 History API 를 사용
JSX(Javascript syntax extension)
javascript와 html이 섞여있다. ⇒ JS 로직과 HTML의 구조를 같이 사용할 수 있다.
jsx 없이 생성시 react.createElement 를 사용한다
주의
⇒ 반드시 부모 요소 하나로 감싸줘야한다!