나태쿤의 개발이야기

지난 "리액트로 웹앱 만들기 with 타입스크립트" 이 책을 보고나서

타입스크립트와 리덕스가 없는 리액트 부분만 학습 및 복습 하고 싶어서 새로운 책을 구매했다

바로 이책인데 목차만 보니까 그런 포지션의 책이다

전체 345 페이지 정도난 "리액트로 웹앱 만들기 with 타입스크립트" 이 책을 보고나서

타입스크립트와 리덕스가 없는 리액트 부분만 학습 및 복습 하고 싶어서 새로운 책을 구매했다

바로 이책인데 목차만 보니까 그런 포지션의 책이다

분량으로 전체 345 페이지 정도니까 3일 잡고 털어보려한다

수,목, 금  3일이면 볼 수 있겠군...

책이 npm 설치없이 하는 CDN 으로 땡겨와서 하는 방식의 소스와 npm 으로 CRA 방식을 둘다 소개하고있는게 특징이고

나름 칼라풀해서 내가 굳이 형광펜 안칠해도 될것같다 자고일어나면 뿌셔보자

현재 타입스크립트 기반으로 react를 학습중에 있는데

리듀서가 햇갈려서 글로서 쓰면서 속풀이를 하려고한다

코드 같은건 없이 글로써만 써보자.

우선. 

플럭스 부터 올라가서 이야기해야한다

페이스북(현재 메타)가 리액트를 발표할때, 

리액트는 플럭스라는 앱 설계 규격으로 만들었다고 한다.

그러다보니 리액트에 도움될 라이브러리도 이 규격을 따라서 만든게 많은데

그중  제일 대표가 되는게 리덕스 라고 한다 

리덕스는 앱 수준 상태 관리 패키지라고하는데

어떤 상태(state)를 특정 컴포넌트만 쓰는게아니라 여러 컴포넌트에 공유할 수 있게 만드는 방식이다

그러니까... 다양한 컴포넌트에서 가져와서 쓸수있고

useState를 대신하여 쓸수도 있다 따라서 랜더링에도 관여할 수 있다. (dispatch 사용)

그렇게 공유하고, 상태를 변경도 하기위해서는

리덕스는 저장소(store)가 필요한데 이는 크게 두가지 방식으로 만든느것 같다

1. RTK 패키지에 있는 configureStore 메서드를 이용하여 만드는 방법과,

2. redux 패키지에 있는 createStore 메서드를 이용하여 만드는 방법 두개인것 같다

근데  1번 방식이 선호된다고 한다 기능도 좋고

dispatch가 호출되면

리듀서가 새로운 상태를 리턴하고

이를 리덕스의 스토어(저장소)에 저장함으로서 랜더링이 일어나는것같다

저장을 했다면

전역개념으로 저장된거니, 필요한 곳에서 useSelector 훅으로 원하는걸 꺼내서 사용할 수 있다

그리고 이 리듀스같은 기능도 리액트의 컨텍스트의 기능이 기반이된다고한다

따라서 리듀스를 사용하라면 App.tsx, App.jsx 쪽에서 항상 최상위 레벨로 존재해야한다

그래야 전역으로 저장하는것도 의미가 통한다

그렇다면 useReducer 훅은 해당 컴포넌트에서만 존재하는 지역변수개념으로 생각하면된다.

마치~~~~~~~~~

spring 에서

request Scope, Session Scope, Application Scope 를 보는것 같다

근데 전역이나 지역이나 뭔차이가 있나싶긴하다

api를 더 잘만들어서 정보를 내려주면 되지 않을까?

똑같은 리듀서를 만드는 중복코드는 줄여줄것같은데...

더 공부해보자

리액트 훅을 배우기 앞서

이분법적으로 알아두면 좋을 것 같아서 글을 작성해본다

우선 파라미터 1개를 갖는 리액트 훅

이때 의존성 배열은 다음과 같은 특징이 있다

일단 이정도로만 알아두자 하나씩 정리해서 올리겠다

리액트를 공부해보자 !!! 

리액트를 사용하려면 Node 를 설치해야하는데 (node, npm)

노드 개발할때 경험을 살려서 이왕이면 nvm 으로 설치하자 ( 이건 본인 편한대로 해도 상관없다 )

https://github.com/coreybutler/nvm-windows

윈도우의 경우 이 링크를 사용하자 

https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12  

그리고cmd (터미널) 에서다음과 같이 버전을 확인 할 수 있다  

이제 리액트 프로젝트르 만들어야 하는데 과거랑 좀 다른게

vite (비트) 라는거를 이용해서 리액트 프로젝트를 생성할 수 있다(리액트 뿐만아니라 뷰, 스벨트 등등 다양하게 지원한다)

vite를 사용해야 하는 이유도 사이트에 적혀있다.

https://ko.vitejs.dev/guide/why.html

1. 리액트 프로젝트 생성

위에서 말한 vite을 이용해서 리액트 프로젝트를 javascript 버전으로 (typescript도 가능) 생성해보자 

터미널에서 진행한다

npm create vite@latest

프레임워크를 리액트를 선택한다

잘 생성되었

내부 파일은 다음과 같다

이를 사용하는 IDE로 열어보자 ( 나는 webStorm 을 사용한다 )

아까 지시한대로 다음을 수행한다

npm install 

npm run dev

하지만 필자는 포트를 3000번으로 하고싶어서 

다음과 같이 추가했다

다음 명령어를 실행하면 3000 번 포트로 실행한다

npm run start