이전까지 Vue만 사용하다 취업과 포트폴리오를 위해서 React를 시작하기로 마음먹었다.

마침 키오스크 프로젝트를 시작해야했는데 이것을 vue 말고 react로 만들기로 결정했다.

---

우선 Vue와 React의 차이를 알아보자

1. 친절함

Vue :

React를 사용하기 전까지는 Vue가 왜 편리하고 친절하다는지 이해하지 못했다.

(vue cli, vue router, vuex)

우선적으로 vue create 프로젝트만 입력해도 친절하게 components폴더와 assets폴더를 만들어 줘서

'아 저 폴더안에 컴포넌트 넣고 저 폴더에 정적파일들 보관하면 되겠구나'

라는 생각이 저절로 떠오른다.

그리고 router와 store을 사용하기 위한 vueex, vue router를 설치하면

정말 친절하게 위 사진과 같이 폴더를 따로 만들어준다.

나는 이게 당연하다고 생각했고 react도 다를 것 없으리라 생각했다.

React :

우선 npx create-react-app 프로젝트를 통해 프로젝트를 시작하면

이게 끝이다.

처음에 Vue 처럼 '보면 이해 가겠지~' 라고 그냥 시작했는데 처음에 내가 무언가 설치를 덜 한줄 알았다.

우선
vue는 ~~~.vue형식의 파일을 렌더링 하는것이고,
react는 ~~~.js자바스크립트 파일을 렌더링 하는것이다.

이때부터 뭔소린가 싶었다. '자바스크립트에 어떻게 html을 쓸 수 있지?' 라는 생각이 자동으로 들었다.

여기서 가장 큰 차이점이 나오는데 바로 react는 JSX라는 자바스크립트의 확장 문법을 사용하는 것이다.

((예시))

function test() {
  return 
  	<div>
      <h1> Im test</h1>
  	</div>
}

export default Movie

위와 같이 함수의 return에 html이 들어간다고 간단하게 이해하는 중이다.

또한 폴더의 구조도

src안에는 정말 App.js와 기타 쓸모없는 css파일만 덩그러니 놓여져있다.

그래서 위와같이 components, css., router 폴더 등을 확실하게 정리해줘야 한다.

---

아직까지 나쁘진 않다 뭐 어차피 `javascript`기반이니 jsx도 금방 익힐 수 있을 거라 생각했다. 착각이지만...

---

2. store

3. router

가장 열받았던 store와 router관리 특히

react redux 를 보면서

'내가 진짜 리액트를 써야하나?'를 열 번 정도 생각해봤다.

물론 사람들 말대로 자유도가 높긴하다.

vue로 작업할 때 life cycle hook 때문에 오류가 많이 떠서 고생했는데

react는 이것도 내가 원하는대로 관리 할 수 있어서 좋긴 하지만

"자유도가 높다 === 내가 다 해야한다"

를 새삼스래 깨달았다.

-이후 추가 예정-