1. Why React?

Angular, Vue --> "MVC" 모델
React --> "V" only

Babel, Webpack = JSX -> Javascript (node 기반) -> CRA

npm install "" --save

return (
<> --> fragment (최상위 레벨은 하나의 태그만(div 생략 가능))

( /> -> self closing 꼭 필요 ) )

inline style -> style = {{color:red}}

{ rce } => 자동 클래스 완성

src (폴더구조)

• Components (페이지 공통 ex.. Header 폴더, Footer 폴더)
• Pages (ex.. Login 폴더, Main 폴더)
• style
• utils
• Router.js

2. 페이지변경

1. link => 클릭 시 이동 (state 보존)

2. withRoute HOC => 함수화 (애로우펑션) => 페이지 이동시 조건 설정 가능

import { withRouter } from 'react-router-dom';

• this.props.history (어느 컴포넌트든 가짐)
• this.props.history.push(/signup) (signup 페이지로 이동)
  => export default withRouter(Login) ==> props 객체에 history 제공;

---

3. React basic

- props 필요시 Constructor 안 this.state,

- props 필요없을시 Constructor 밖 state.

- React.Fragment == <> , </>

- e.preventDefault() -> 이벤트 발생 시 refresh 방지

- setState() 는 비동기이다.

- 동기 처리 => 콜백함수 사용.

- onChange={this.handleChange}

=> onChange={ () => this.handleChange() }

- key -> 바뀐 값 rerender시 key(고유값) 활용 바뀐 컴포먼트만 rerender

- export class 사용 ==> import { className } from "./Feeds.js" (named export)

- hoc(higher order component) ==> 로그인없이 url 접근 확인

- ...array : spread operator (내용 복사 for object, array)

== Array.from()

- 리액트는 hover 존재 x ==> onMouseEnter, onMouseLeave

---

4. 데이터 가져오기 (API)

• componentDidMount() ->
• fetch("API 주소")

componentDidMount() { // 최초 한번만 실행
	fetch("https://jsonplaceholder.typicode.com/users")
	    .then((res) => res.json()) // json데이터 -> js object, array로 변환
	    .then((res) => this.setState({ monsters: res }));
}
-> api 호출 동안 로딩화면(isLoading) 적용