리액트를 이용한 task앱 만들기
1-1. 만들고자 하는 앱 살펴보기
react-task-app이라는 프로젝트 생성
-> 생성할 때 이것저것 하나씩 설치하기 어려우니까 한 번에 설치하려고 한다
-> 리액트 앱을 생성할 때 터미널에 npx create-react-app 한다.
-> npx과 npm의 차이? : npm은 그 registry가 있는데 그 안에 있는 패키지를 가져와서 설치한다. (그 레포에 영구 설치)/ 한 번만 이 경로에 설치하고 싶을 때에는 npx를 사용.
1-2. 구조 생성하기
src 폴더 내에 4개의 새 폴더 생성
1. components : 컴포넌트 모아놓기
2. hooks : custom hooks만들어서 쓸 것
3. store
4. types
각자의 파일 사용 이유
1-3. 모든 컴포넌트들 생성하기
컴포넌트 파일 내에 넣고
es7 설치, rafce 하면 react 컴포넌트 기본 내용 바로 나오게 가능
1-4. 필요한 패키지들 설치하기
설치함
npm install하여서
1-5. 리덕스 사용을 위한 준비하기
Redux : 상태 관리 라이브러리(선택사항)
원래는 State와 Props를 이용하여 상태를 여러 컴포넌트와 공유를 할 수 있는데, 앱이 커지다보면 관리가 힘들어짐, 소스코드가 지저분해짐.
이를 방지하기 위해 redux를 사용함
그래서 redux의 flow는?
Action(객체)을 dispatch(함수) => action을 전달한다는 뜻/함수 안의 인수를 넣어줘서 전달을 함
=> reducer(함수)로 전달함. type에 따라 처리하고, return하는 값은 => Redux Store State으로 전달된다. Redux Store State에 있는 값이 업데이트가 되면 => React Component rerendering이 되게 된다.
Toolkit에서 reducer를 생성하려면 Slice가 있어야 함.
그래서 지금 우리는 Slice를 만들 겁니다.
-> modalSlice.tsx를 수정.
1-6. Board 데이터 및 타입 생성
1-7. 리덕스 Hooks 생성하기
1-8. 전역 스타일 생성하기
App.css.ts 파일 마지막으로 작성함
