[React]
-
목차
React따라하기
TypeScript
JavaScript 비동기
Story개발 따라하기React 특징
-
화면전체가 아닌 렌더링 되는 컴포넌트만 변경
-
컴포넌트 기반의 라이브러리
-
컴포넌트 재사용성 -> 효율적, 유지보수성 용이
-
Props & State
ex) a컴포넌트 b컴포넌트의 변수명이 같아도 독립적이다. 한 컴포넌트의 변경이 다른 컴포넌트의 변경에 영향 x, setter함수를 받아야 다른 컴포넌트에 영향을 줄 수 있다. -
Virtual DOM
-
계층형 구조
npx create-react-app my-app --template typescript
react앱을 만들것인데 my-app프로젝트 템플릿은 타입스크립틀 만들것이다.
axios: 백엔드 통신 호출
roughter DOM: react는 싱글페이지, 멀티페이지로 구성하기위해 설치
redux: 상태 관리를 편하게 해주는 라이브러리
- 함수형 컴포넌트 VS 클래스형 컴포넌트
과거 클래스형, 최근 함수형
[JSX]
[Props]
[State]
- 컴포넌트 내부적
useState
components.map() -> for each문과 비슷
[Component LifeCycle]
1. React Component LifeCycle
shouldComponentUpdate -> true, false를 반환
componentDidUpdate 실행
useEffect는 shoulddidmount
[TypeScript]
- 특징
- JavaScript + 정적 타입 문법 = TypeScript
- r
[JavaScript Asynchronize]
- javascript 특징
싱글스레드이지만 브라우저가 가지고있는 런타임 넘겨준다.
3가지 비동기 방식
-USE STATE 문법-
cont [변수명, set함수] = useState (초기값)
MiniBee