[React 1일차] 리액트의 첫인상

어쩌다보니 리액트를 시작하게 되었다.

 

맛보기로 유튜브(https://www.youtube.com/watch?v=V9XLst8UEtk&ab_channel=%EC%BD%94%EB%94%A9%EC%95%8C%EB%A0%A4%EC%A3%BC%EB%8A%94%EB%88%84%EB%82%98)를 시청

 

해당 강의 영사은 리액트보다는 타입스크립트에 조금 더 초점을 뒀다.

영상 시청이 끝난 뒤, 들었던 생각들

1. v-for, v-if 같은 것들은 어떻게 사용하지?

2. 라우터는 어떻게 설정하지?

3. 상태관리는 어떻게 해야하지?

 

---

1번에 대해서는 구글링으로 쉽게 찾을 수 있었다.

기존에 Vue에서는 아래와 같이 v-for로 사용하는데

// Vue.js
<template>
	<div>
    	<p v-for="(data, index) in list" :key="`list_${index}`">
        	{{data}}
        </p>
    </div>
</template>

그에 반해 React는 다음과 같이 사용한다

// React
<div>
	{
        list.map((data, key) => (
            <p key={key}>{data}</p>
        ))
    }
</div>

Vue는 v-for라는 정해진 규칙을 따라야하는 반면에, React는 자바스크립트 문법 그대로 사용하다보니

이런 부분에서는 React가 좀 더 쉬워보이기는 한다. 다만, 익숙함 정도의 차이일까? Vue가 더 깔끔해 보이는건 어쩔 수가 없다.

---

2번에 대해서는 라이브러리 설치가 필요하다고 한다.

react-router-dom을 설치해야한다. 인터넷에는 React Router이라고 해놓고, 설치하는 라이브러리는 저거라서 처음에는 뭔가 싶었다. 

아래와 같이 BrowserRouter을 크게 감싸고 내부에 Routes 내에 Route를 넣어준다.

<BrowserRouter>
	<Routes>
    	{/*<Route path="경로" element={컴포넌트}></Route>*/}
    	<Route path="/login" element={<Login />}></Route>
    	<Route path="/home" element={<Home />}></Route>
    </Routes>
</BrowserRouter>

(Nuxt는 폴더구조로 바로 잡아주는데, React도 이런 프레임워크가 있을법한데.. 추후에 찾아보도록 하자.)

---

3번에 대해서는 내일 라우트 미들웨어, JWT와 같이 알아보자.
(추가로 위에 언급한 유튜브 영상 댓글보면 React.FC 타입 사용은 안좋다는 말도 있는데 그것도 이유를 찾아보자)