React_기본 태그 및 함수

 import   from 

: import 하는 법

 1) import 모듈   : 모듈 전체를 불러온다.

 2) import 변수 or 함수   from 모듈   : 모듈 중 필요한 것을 가져옴

 3) import { 변수1, 함수1, 함수2... }   from 모듈

 

 exports 

-Named exports : 여러 값을 export하는 데 유용    ex) export { x1 }

-Default exports : 모듈 당 딱 한 개의 default export만 있어야 함  /  '메인'이라고 할 수 있는 것에 많이 쓰임.

 

 

import {   BrowserRouter as Router,   Switch,   Route,   Link } from "react-router-dom";

 <Router> 

: <BrowserRouter> & <HashRouter> 도 있음

-BrowserRouter : HTML5의 history API 활용해 UI 업데이트  / 많이 쓰임.

-HashRouter : URL의 hash를 활용한 라우터  / 정적인 페이지에 적합

 

 <Switch> 

: 경로를 컴포넌트와 매칭시키기 위한 라우트 컴포넌트

: path의 충돌이 일어나지 않게 <Route>들을 관리한다.

: Route들을 묶는다 / router들을 반복하면서, 현재 위치와 일치하는 첫번째 요소만 렌더링

: err일 경우 404페이지를 반환

 

 <Route> 

: 경로를 컴포넌트와 매칭시키기 위한 라우트 컴포넌트

: 경로-컴포넌트를 매칭 > err일 경우 null반환

 

 ex1) <Route exact path="/"> <LandingPage /> </Route>

 ex2) <Rout exact path="/" component={LandingPage} />

 

 <Link> 

: 링크를 생성한다.

 

<component명 />

---

 <suspense>

: 컴포넌트가 렌더링하기 전에 다른 작업이 먼저 이루어지도록 함. ex) loading...

 

ex)

<React.Suspense fallback={ ( <div> Loading.... </div> ) }>

         내용물

</React.Suspense>

 

 

 onChange={ onChange } / onSubmit={ onSubmit } / onClick={ onClick } 

: 태그 속성값으로 입력 / 이벤트가 발생하면 { } 함수 실행

: [ event ] 를 인자로 가짐.

 

 onDrop={ onDrop } 

: [ files ] 를 인자로 가짐.