[React.js] 공부한 이론 정리

useState

데이터 초기값 설정 및 업데이트

import {useState} from "react";

const [state, setState] = useState(초기값);

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

useEffect

특정시점(초반 한번 일회성등)에 함수 실행

import {useEffect} from "react";

useEffect(()=>{}, []);

// []는 react가 지켜볼것(hook)이 없으므로 초기 한번 실행한다. 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

useParams

URL에 있는 변수 값을 반환하는 함수

 

App.js

const app = () => {

 return <Router>

 <Switch>

 <Route path="/movie/:id"> /* :id는 :변수명 */

 <Detail />

 </Route>

</Swtich>

</Router>

}

 

Detail.js

import {useParams} from "react-router";

const Detail = () => {

 const x = useParams();

 console.log(x);

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

useLocation

react-router DOM이 보내주는 location object에 접근 가능

import {useLocation} from "react-router";

 

Coins.tsx

<Link to={{pathname: '/${coin.id}', state: {name: coin.name},}}>

 

Coin.tsx

const location = useLocation();

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

useQuery

react-query가 fetcher함수를 도와 데이터를 fetch하고 그 데이터를 우린 useState()를 통해 담아주었지만, react-query는 데이터를 fetcher 함수를 통해 데이터를 가져온후, 담아주는 것까지 해줌!

isLoading이라는 boolean 값으로 데이터를 다 fetch 하면 isLoading 값을 변경하여 한번만 로딩되게 도와준다.

 

src/api.ts

export function fetchCoins(){

 return fetch("불러올 API url").then((response)=>response.json());

}

 

src/routes/Home.tsx

import {useQuery} from "react-query";

function Home(){

 const {isLoading, data} = useQuery("unique key", fetchCoins); /* fetchCoins 함수에서 데이터 가져와서 data에 데이터를 담아준다. */

}

export default Home;

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

참고)

const x = [1,2,3];

const [a,b,c] = x;

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3