React Redux 기초(Counter App 만들기) with Typescript

1. react와 typescript 설치하기
   npx create-react-app . --template typescript
   create-react-app으로 react를 설치할 때 --template typescript 붙이면 typescript로 react 설치된다.
2. redux 설치하기
   npm i redux --save

--save 붙이면 라이브러리 설치할 때 package.json에는 적용안되고 package-lock.json에는 적용되서 동작은 하는데 확인이 어려울 때를 방지할 수 있다.

3. App.tsx 기본 구성 만들기기본 내용 지우고 글자랑 버튼 두 개를 만들어 줬다

   function App() { 
   return ( <div> Clicked: times <button> + </button> <button> - </button> </div> ); 
   }

4. reducer 만들기

   const counter = (state = 0, action: {type : string}) => { 
   switch (action.type) { 
   case 'INCREMENT': 
     return state + 1; 
   case 'DECREMENT': 
     return state - 1; 
   default: 
     return state; } 
   }; 
   

export default counter;

전역에서 쓸 변수를 바꾸는 함수이다. 나는 그렇게 이해했다.

5. index.tsx 수정하기
1) store 만들기
```javascript
const store = createStore(counter);

createStore라는데 매개변수로 아까 만든 reducer인 counter를 넣는다.
2) root.render() 를 함수로 바꾸기

const render = () => root.render(
  <React.StrictMode>
    <App
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />
  </React.StrictMode>
);

render();

함수형태로 바꿔서 호출해준다.
App 컴포넌트에 props로 값과 변경할 수 있는 함수를 넘겨준다.
getState()는 store에 내장된 메소드이다.
dispatch()도 store에 내장된 메소드이다.
dispatch()는 type을 바꿀 수 있다.
바뀐 type에 따라서 만들어 둔 reducer인 counter함수에 action.type에 따라 동작한다.
3) store에 subscribe하기

store.subscribe(render);

store에 subscribe 메소드에 매개변수로 render를 넣는다.

6. 동작할 수 있도록 App.tsx 수정하기

   import './App.css';
   

type Props = {
value: number;
onIncrement: () => void;
onDecrement: () => void;
};

function App({value, onIncrement, onDecrement}: Props) {
return (

Clicked: {value} times

);
}

export default App;

```

이제 +, - 누를 때 마다 value가 바뀔 것이다.
세상 복잡하다
쓰기 어렵군
다음꺼 공부하면 또 올리겠다