<div id="readability-page-1" class="page"><div><blockquote>
Velopert 선생님의 강의를 보고 쓴 글입니다.
</blockquote>
<h4 id="contextapi를-이용한-todolist는-건너뛰고-바로-redux로---">contextAPI를 이용한 TodoList는 건너뛰고 바로 Redux로 . . !</h4>
<blockquote>
<h3 id="yarn을-이용해-redux-설치">yarn을 이용해 redux 설치</h3>
React-Redux는 TS지원이 안되므로 따로 @types를 붙여 설치
<img src="https://media.vlpt.us/images/jce1407/post/b07607a3-ffb1-476f-8231-784f674c3f68/image.png">
src/modules/counter.ts
</blockquote>
<blockquote>
<h3 id="redux-action-type선언하기">Redux Action Type선언하기</h3>
Type을 선언할때는 문자열 맨 뒤에 <code>as const</code> 를 붙여주어야 합니다. 
<code>as const</code> 를 붙이는 이유는 추후 액션 생성함수를 통해 액션 객체를 만들때 실제값을 가르키게 하기 위함입니다!
<img src="https://media.vlpt.us/images/jce1407/post/2e611229-cf44-482f-a0be-88d75bd80630/image.png">
src/modules/counter.ts
</blockquote>
<blockquote>
<h3 id="action-생성-함수-만들기">Action 생성 함수 만들기</h3>
액션 생성함수는 return 또는 arrow fn을 사용할수있습니다.
<img src="https://media.vlpt.us/images/jce1407/post/252723a3-16b0-4b39-ae4f-4b3eeed10a30/image.png">
src/modules/counter.ts
</blockquote>
<blockquote>
<h3 id="action-객체들에-대한-type-준비">Action 객체들에 대한 Type 준비</h3>
Reducer를 만들때 Action 파라미터 타입을 설정하기 위해서 우리가 만든 모든 액션들의 Ts타입을 준비해야합니다. 
**<code>ReturnType</code>**은 함수에서 반환 타입을 알아내주는 유틸 타입 입니다.
<img src="https://media.vlpt.us/images/jce1407/post/3eb3f0d6-3335-43f5-a7a9-cc37053a40e2/image.png">
src/modules/counter.ts
</blockquote>
<blockquote>
<h3 id="상태의-타입-초기-값-선언-그리고-리듀서-작성">상태의 타입, 초기 값 선언 그리고 리듀서 작성</h3>
타입은 <code>type</code> 과 <code>interface</code> 중 하나를 쓸수있습니다.
</blockquote>
<img src="https://media.vlpt.us/images/jce1407/post/810511b1-c8aa-48fd-8c5f-575dc4abf817/image.png">
<blockquote>
Reducer를 작성할때 함수의 return 타입에 상태의 타입을 꼭 넣어야합니다.
<img src="https://media.vlpt.us/images/jce1407/post/a87b5131-adcc-4f68-b63f-e1adb7ac07fb/image.png">
src/modules/counter.ts
</blockquote>
<blockquote>
<h3 id="리덕스-적용">리덕스 적용</h3>
루트 리듀서를 만들땐 RootState라는 타입을 만들어서 내보내 주어야합니다. 
이 타입은 추후 우리가 컨테이너 컴포넌트를 만들때 스토어에서 관리하고 있는 상태를 조회하기 위해서 useSelector를 사용 할 때 필요로 합니다.
<img src="https://media.vlpt.us/images/jce1407/post/4939904b-1b8a-4076-9f21-ef85c5e85271/image.png">
src/modules/index.ts
<img src="https://media.vlpt.us/images/jce1407/post/cd01d14b-1a46-4664-a78f-fd71cfbb4d43/image.png">
index.tsx
</blockquote>
<blockquote>
<h3 id="컴포넌트-만들기">컴포넌트 만들기</h3>
Up, Down, 5Up 버튼 3개와 현재 count 를 보여줍니다.
<img src="https://media.vlpt.us/images/jce1407/post/d5355d74-8b80-4c12-9e7e-0da1db286684/image.png">
src/components/Counter.tsx
</blockquote>
<blockquote>
<h3 id="컨테이너-만들기">컨테이너 만들기</h3>
TS로 컨테이너를 만들때는 useSelector에서 state 타입을 RootState로 지정해서 사용해야합니다.
<img src="https://media.vlpt.us/images/jce1407/post/0151c1cc-b677-42bf-8096-41dfbbbfcaf0/image.png">
src/containers/CounterContainer.tsx
</blockquote>
<blockquote>
<h3 id="app에서-렌더링-하기">App에서 렌더링 하기</h3>
<img src="https://media.vlpt.us/images/jce1407/post/adf3690d-f2f0-4c02-85db-17622817e802/image.png">
App.tsx
</blockquote>
<blockquote>
<h3 id="만약-컨테이너-와-컴포넌트구조를-쓰지-않는다면">만약 컨테이너 와 컴포넌트구조를 쓰지 않는다면?</h3>
Hooks를 사용해야 합니다!
<img src="https://media.vlpt.us/images/jce1407/post/635e3651-8cad-4a9d-abd9-05ffc0bd87b6/image.png">
src/hooks/useCounter.tsx
<h3 id="컴포넌트-수정">컴포넌트 수정</h3>
<img src="https://media.vlpt.us/images/jce1407/post/be756107-2273-4c21-af18-0ae64b536b44/image.png">
src/components/Counter.tsx
<h3 id="app에서-렌더링-하기-1">App에서 렌더링 하기</h3>
<img src="https://media.vlpt.us/images/jce1407/post/4143d78a-1df7-42e2-b1b7-edb22a17ae61/image.png">
</blockquote>
<blockquote>
<h3 id="알게된-점">알게된 점!</h3>
<ul>
<li>Redux에서</li>
</ul>
<blockquote>
1. 액션 타입 선언 
2. 액션 생성 함수 생성 
3. 액션 객체에 대한 Type준비 
4. 상태의 타입과 초기값 선언 
5. 리듀서 만들기 
6. index쪽에 다 설정 해주기 
7. 컴포넌트 와 컨테이너쪽 만들기 
8. App에 렌더링 해주기
</blockquote>
<ul>
<li>액션 타입 선언 에서 <code>as const</code> 끝에 붙이기</li>
<li>액션 객체 타입 준비할 때 <code>ReturnType</code> 쓰기</li>
<li>리덕스 적용할 때 RootState 라는 타입을 만들어서 내보내 주기</li>
<li>컨테이너 만들 때 useSelector 의 state 부분의 타입을 RootState로 지정해야합니다</li>
<li>컴포넌트 / 컨테이너 구조 대신에 Hooks를 사용해서 만들수도 있습니다</li>
</ul>
</blockquote></div></div>

Clzzi.log

Clzzi

Velopert 선생님의 강의를 보고 쓴 글입니다.
contextAPI를 이용한 TodoList는 건너뛰고 바로 Redux로 . . !
yarn을 이용해 redux 설치
React-Redux는 TS지원이 안되므로 따로 @types를 붙여 설치
src/modules/counter.ts
Redux Action Type선언하기
Type을 선언할때는 문자열 맨 뒤에 as const 를 붙여주어야 합니다.
as const 를 붙이는 이유는 추후 액션 생성함수를 통해 액션 객체를 만들때 실제값을 가르키게 하기 위함입니다!
src/modules/counter.ts
Action 생성 함수 만들기
액션 생성함수는 return 또는 arrow fn을 사용할수있습니다.
src/modules/counter.ts
Action 객체들에 대한 Type 준비
Reducer를 만들때 Action 파라미터 타입을 설정하기 위해서 우리가 만든 모든 액션들의 Ts타입을 준비해야합니다. 
ReturnType은 함수에서 반환 타입을 알아내주는 유틸 타입 입니다.
src/modules/counter.ts
상태의 타입, 초기 값 선언 그리고 리듀서 작성
타입은 type 과 interface 중 하나를 쓸수있습니다.
Reducer를 작성할때 함수의 return 타입에 상태의 타입을 꼭 넣어야합니다.
src/modules/counter.ts
리덕스 적용
루트 리듀서를 만들땐 RootState라는 타입을 만들어서 내보내 주어야합니다.
이 타입은 추후 우리가 컨테이너 컴포넌트를 만들때 스토어에서 관리하고 있는 상태를 조회하기 위해서 useSelector를 사용 할 때 필요로 합니다.
src/modules/index.ts 
index.tsx
컴포넌트 만들기
Up, Down, 5Up 버튼 3개와 현재 count 를 보여줍니다.
src/components/Counter.tsx
컨테이너 만들기
TS로 컨테이너를 만들때는 useSelector에서 state 타입을 RootState로 지정해서 사용해야합니다.
src/containers/CounterContainer.tsx
App에서 렌더링 하기
App.tsx
만약 컨테이너 와 컴포넌트구조를 쓰지 않는다면?
Hooks를 사용해야 합니다!
src/hooks/useCounter.tsx
컴포넌트 수정
src/components/Counter.tsx
App에서 렌더링 하기
알게된 점!
Redux에서
1. 액션 타입 선언 
2. 액션 생성 함수 생성
3. 액션 객체에 대한 Type준비 
4. 상태의 타입과 초기값 선언 
5. 리듀서 만들기
6. index쪽에 다 설정 해주기
7. 컴포넌트 와 컨테이너쪽 만들기
8. App에 렌더링 해주기
액션 타입 선언 에서 as const 끝에 붙이기
액션 객체 타입 준비할 때 ReturnType 쓰기
리덕스 적용할 때 RootState 라는 타입을 만들어서 내보내 주기
컨테이너 만들 때 useSelector 의 state 부분의 타입을 RootState로 지정해야합니다
컴포넌트 / 컨테이너 구조 대신에 Hooks를 사용해서 만들수도 있습니다

타입스크립트 찍먹해보기3

댓글