React JS - 1

1. 프로젝트 생성

   npx create-react-app

• create-react-app 이란 react로 작업하기 위한 것을 자동적으로 설정해준다
• npx는 npm처럼 모듈을 사용할 수 있게 해주지만, 본인의 컴퓨터에 저장하지는 않는다. (리엑트는 업데이트가 꾸준히 됨으로 오래된 버전을 컴퓨터에 갖고 있을 필요가 없다.)

2. 절대경로를 src로 지정하기 위해서

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

3. <> </> fragment
   JXS는 한번에 하나밖에 리턴하지 못함으로 fragment 로 감싸줘야한다. 또 모든 자식들은 부모를 갖고 있어야한다.

4. Router

   npm i react-router-dom

• Hash Router: 웹사이트 보단 앱에 사용하는 느낌
• Browser Router : 실제 브라우저 처럼 보여줌

4-1. Router Composition :

<Route path="/" component={Home}/>
<Route path="/go" component={go}/>

위 같은 코드에서 go url로 이동하면 화면에
Home과 go 둘 다 랜더링 된다. 이를 Composition 이라고 하고
이를 막기 위해선

<Route path="/" exact component={Home}/>
<Route path="/go" exact component={go}/>

exact를 prop으로 넣어줘야 한다

다른 방법으로는

<Switch>
	<Route path="/"  component={Home}/>
	<Route path="/go"  component={go}/>   
</Switch>

Switch는 위에서 내려오면 서 url이 일치하는 한개의 라우터를 랜더한다.

5. Link

• react 의 html a 같은 역활
• a href= 대신 Link to= 를 사용한다.

5-1 withRouter

• 다른 컴포넌트를 감싸는 컴포넌트
• 라우터에 대한 정보를준다.
• history, location, match 를 갖고 있음

6. css

npm i styled-components

• styled-components는 style이 안에 있는 컴포넌트를 생성할 수 있다
• 즉 styled-components 컴포넌트에 props 을 전달 할 수 있다.

import {Link} from "react-router-dom";

const SLink = styled(Link)`
	...css
`;
	
 <SLink to="/">Home</SLink>

위는 Link와 styled component 결합

7. axios
   axios의 인스턴스를 설정해 줄 수 있다.

const api = axios.create({
	baseUrl : "",
    	params : {
    		"api_key" : "",
	        ...
    		}
})
	```