[2023년 목표] 리액트 마스터🔥

2023년에는 react, typeScript, react-query, recoil, next.js 마스터가 2023년 목표이다.

프론트엔드 신이 되고싶다!! 나능 할 수 있다 !!!

 

그 첫 게시물로 노마드코더 리액트 마스터 강의를 들으며 알게된 간단한 react tip(?)을 정리했다.

1. return없이 map쓰기, 2. →는 오른쪽 화살표

{coins.map((coin) => (
	<Coin key={coin.id}>
		<Link to={`/${coin.id}`}>{coin.name} &rarr;</Link>
	</Coin>
))}

 

2. Link를 통해 다른 화면에 정보 보내기

화면 이동할 때 데이터를 보낸다는 것은

parameter를 이용해서 URL에게 정보를 넘기는 것이다.

이런 방식으로 한 화면에서 다른 화면으로 정보를 받아올 수 있다. 

<Link to={`/${coin.id}`} state={coin}>

Link 방식으로 했을 때 누군가가 페이지에 바로 접속하려고(URL을 치고 들어오려고하면) 한다면 에러가 난다. (시크릿모드)

왜냐하면 state가 생성되려면 Home화면을 먼저 열어야 하기 때문이다. (클릭할 때 state가 만들어지기 때문에)

이것을 해결하기 위해서 물음표 해주면 된다.

function Coin() {
  const [loading, setLoading] = useState(true);
  const { state } = useLocation() as LocationState;

  return (
    <Container>
      <Header>
        <Title>{state?.name || "Loading..."}</Title> // state가 존재하면 name을 가져오고 없으면 Loading을 보여줘라.
      </Header>
      {loading ? <Loader>Loading...</Loader> : null}
    </Container>
  );
}

 

3. useEffect 즉시 실행 함수

useEffect(() => {
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
    })();
  }, []);

 

4. 변수 캡슐화 : 변수 2개 합치기

// 기존
(async () => {
	const response = await fetch(
		`https://api.coinpaprika.com/v1/coins/${coinId}`
	);
	const json = await response.json();
})();

//수정 후
(async () => {
	const response = await (
	await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
).json();