[React] Mobx 데코레이터 사용해서 앱 만들기

🙋‍♀️Mobx 라이브러리 이용해서 카운트 앱 만들기 ( 이전 벨로그 )

...

이전 벨로그에서 만든 '카운트 앱'이랑 같은 앱을 하나 만들거임❗

현재 Mobx는 6버전, 지금 최신이 6v
5v까진 데코레이터(@) 라는 걸 이용했었음

근데 Mobx 사용하면서 @ 전혀 사용 안 했음🙅‍♀️

Mobx 에서도 새로운 버전에선
데코레이터를 안 사용해도 될 수 있게끔 하는건데
대부분 Mobx 소스 코드를 보면 아직도 많이 사용하는 걸 볼 수 있음🤷‍♀️
( *'레거시'한 코드들 대부분 이렇게 되어 있기 때문 )

💡 오래된 시스템, 코드, 기술, 또는 방식

---

👩‍💻데코레이터 이용해서 앱 만들어보자

🎈데코레이터 사용 방법

👉 TS cra 패키지 사용하거나 '웹팩' & '바벨' 설치해서 사용

1️⃣ Typescript 사용하기 : npx create-react-app my-app --template typescript

2️⃣ Create-React-App : eject / cutomize-cra / react app rewired
🆗 cutomize-cra & react app rewired 거의 사용❌

3️⃣ Babel 7 : 리액트 앱을 '웹팩' 이용해서 첨부터 만들어보기
☑ 이 방법을 사용할 것

eject( 탈출 ) 하는 방법이걸 이용하는 방법이 있음 ( 좋은 방법이 아님 )

📁바탕화면에 mobx-app-decorator 폴더 만들고 VScode 오픈하고 폴더 끌어오기

원랜 create-react-app이나 Vite 이용해서 바로 리액트 앱을 생성하는데
그러지 않고 하나씩 생성해볼 것

☝Packag.json이 있어야함

npm init -y 옵션 줘서 바로 생성되게 하기

여기서 필요한 '웹팩', '바벨' 이런것들을 복사를 해올거임

@데코레이터 사용할 수 있게끔 필요한 플러그인들을 받아온 것
webpack, webpack-cli, webpack-dev-server ,,,

여긴 mobx 사용하기 위한 부분들과 react 부분들임

npm i -f : 오래된 애들이 있어서 강제로 모든 모듈들을 설치함

🏋️‍♀️ '바벨'을 위한 설정하기 ⚙

@decorator를 사용할 수 있게끔 하는 소스 코드 라고 알아두면 됨❗
👉 이렇게 하면 데코레이터를 사용할 수 있구나 정도 알면됨🙂

⚙ '웹팩' 설정하기

'babel-loader' 사용한다고 하는데
어디서 사용하냐면 test 부분 이 확장자를 가진 파일들✔

loader에 어떤 option을 주는지✔

Webpack devServer에 대한 설정들
compress: true 압축하는 거, port 3000번 이용하고
open: true는 실행했을 때 바로 브라우저에서 볼 수 있게 하는 부분

그리고 어떠한 플러그인 이용할건지 하는 부분임

🏷index.html 파일 만들기

! + Teb 키 누르거나 html5 엔터 누르면 자동으로 생성됨🎆

body 태그 안에 어떤걸 작성해야할까❓
👉 리액트는 SPA[ Single Page Application ]🔥

하나의 div를 잡은 담에 JS를 이용해서 필요한 요소들 다 넣어주는 것🤓

#️⃣주로 id를 root 라고 해줬음

div 태그 사이에 JS 뭔가를 넣어줄 때 첨에 JS의 시작점이 필요🙆‍♀️

🏃‍♀️시작점인 index.js 파일 만들기

src 폴더 만들고 이 안에 index.js 파일 만들기

이부분 이용해서

💪index.html 이부분을 잡고 있는 것

가져와서 넣어주기, 그리고 ReactDOM 같은 경우엔

react-dom/client 에서 가져오면 됨❗

root.render 해준담에

👩‍🦱가장 부모 컴포넌트인 App.js 만들기

rafce 해서 자동으로 함수형 컴포넌트 생성하기

🌫🐱‍🏍index.js로 다시 이동해서

div 태그 안에 App 컴포넌트 넣어주기

🙋‍♀️이제 실행하고 싶은데 어떻게 실행하면 될까❓

실행하는 건 webpack-dev-server 이걸 이용하면 됨❗

얘 이용할 땐 scripts 여기에서 start 하고 --hot --open 하면 됨

⬇npm run start로 실행하기

---

지금은 create-react-app 이나 Vite 이용하지 않고
스스로 리액트 앱을 실행할 수 있게 한 것😎

@데코레이터 이용할 수 있는 환경으로 리액트 앱을 생성 해놓은 거임🎆
👉 @데코레이터 이용하려고 했던 건 Mobx 때문⭕

Mobx 부분을 위해 src 폴더 안에 CounterStore.js 파일 만들기

🙂복붙 해서 코드 훑어보자🙃

@데코레이터 사용 안 했을 땐 count가 observable이고,
increase가 action이고 이런 정의를 makeObservable 에서 다 해줬는데

@데코레이터 사용 후엔 @ 이걸로 어떤 건지 정의해주고 있음

로직이나 이런 부분은 다 똑같음

그리고 App.js 애를 observer로 감싸주고 이렇게 사용했는데
데코레이터 사용 후엔 @observer 사용해서 하면 됨✔

이렇게 하고 npm run start로 실행해보면 됨👀

리액트에서 JS를 이용할 때 @데코레이터 어떻게 이용하는지 한 번 알아본거임🧐

사용할 일은 없을거임,,, 이런게 있다 정도 알고 가면 될 듯,,,⚡