따라하며 배우는 리액트 A-Z

[프론트엔드, 웹 개발] 강의입니다.

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

✍️
이런 걸
배워요!

리액트

NextJS

타입스크립트

정적 사이트 자동 배포

도커

강의:  https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#

강의 자료 :  https://github.com/braverokmc79/DiagramPDF

소스 : 

https://github.com/braverokmc79/react-count-app

[10]. 리덕스

97. 리덕스 미들웨어

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119948?tab=curriculum

const loggerMiddleware =(store : any) =>(next:any) =>(action:any)=>{
    console.log("store" , store);
    console.log("action", action);
    next(action);
}
const middleware =applyMiddleware(loggerMiddleware);
const store =createStore(rootReducers , middleware);

=>

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {applyMiddleware, legacy_createStore as createStore } from 'redux';
import rootReducers from './reducers';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const loggerMiddleware =(store : any) =>(next:any) =>(action:any)=>{
    console.log("store" , store);
    console.log("action", action);
    next(action);
}
const middleware =applyMiddleware(loggerMiddleware);
const store =createStore(rootReducers , middleware);


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

render();

store.subscribe(render);

98. Redux Thunk

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119949?tab=curriculum

설치 :

npm i axios 


npm  i redux-thunk

src/reducers/posts.tsx

export enum ActionType{
    FETCH_POSTS = "FETCH_POSTS",
    DELETE_TODOS ="DELETE_TODOS"
}

export interface Post{
    userId :number;
    id:number;
    title:string;
}


interface Action {
    type:ActionType;
    payload:Post[];
}

const posts = (state = [] , action :Action) => {
    switch(action.type){
        case 'FETCH_POSTS':
      
            return [...state, action.payload] ;
        default :
            return state
    }
    
}

export default posts

src/reducers/actions.tsx

import axios from 'axios';

export const fetchPosts=() :any=>{
    return async function fetchPostsThunk(dispatch :any, getState :any){
        const response =await axios.get("https://jsonplaceholder.typicode.com/posts");
       // console.log(" response.data  :  " , response.data)
        dispatch({type: "FETCH_POSTS", payload :response.data});
    }
}


export const getPosts= ():any => async (dispatch :any, getState :any) =>{
    const response =await axios.get("https://jsonplaceholder.typicode.com/posts");
    dispatch({type: "FETCH_POSTS", payload :response.data});
}

App.tsx

~

import { Post } from './reducers/posts';
import { fetchPosts, getPosts } from './actions/posts';
~



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

~
  
  const posts :Post[] =useSelector((state :RootState)=>state.posts[0]);


~



  
    useEffect(()=>{
        dispatch(getPosts());
    }, [dispatch ]);

  ~

 

  return (
    <div className="App">
         Clicked : {counter} times 

        <button onClick={onIncrement}>
          +
        </button>

        <button onClick={onDecrement}>
          -
        </button>
       <ul>
          {todos.map((todo, index)=><li key={index}>{todo}</li>)}
       </ul>
      <form onSubmit={addTodo}>
          <input type='text' value={todoValue} onChange={handleChange} />
          <input type="submit" />
      </form>

          <ul>
            {posts && posts.map((post,index)=><li key={index}>{post.title}</li> ) }
          </ul>
    </div>
  );
}

export default App;

99. Redux Toolkit

강의 :

https://www.inflearn.com/course/따라하는-리액트/unit/120665?tab=curriculum

디렉토리 생성

react-redux-toolkit

설치

npx create-react-app  ./ --template redux-typescript

설치

npm i @reduxjs/toolkit react-redux