2037
No
따라하며 배우는 리액트 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]. 리덕스
94. 리덕스란?
강의:
https://www.inflearn.com/course/따라하는-리액트/unit/119943?tab=curriculum
95. 미들웨어 없이 리덕스 카운터 앱 만들기
강의:
https://www.inflearn.com/course/따라하는-리액트/unit/119944?tab=curriculum
$ npx create-react-app ./ --template typescript
npm install redux --save
src/reducers/index.tsx
const cunter =(state =0 , action:{type:string} )=>{
switch(action.type){
case "INCREMENT":
return state+1;
case "DECREMENT":
return state-1;
default:
return state;
}
};
export default cunter;
App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
type Props={
value:number;
onIncrement: ()=>void;
onDecrement: ()=>void;
}
function App({ value,onIncrement, onDecrement } :Props) {
return (
<div className="App">
Clicked : {value} times
<button onClick={onIncrement}>
+
</button>
<button onClick={onDecrement}>
-
</button>
</div>
);
}
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {legacy_createStore as createStore } from 'redux';
import counter from './reducers';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const store =createStore(counter);
const render = ()=>root.render(
<React.StrictMode>
<App value={store.getState()}
onIncrement={()=> store.dispatch({type:"INCREMENT"})}
onDecrement={()=> store.dispatch({type:"DECREMENT"})}
/>
</React.StrictMode>
);
render();
store.subscribe(render);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
96. combineReducers
강의:
https://www.inflearn.com/course/따라하는-리액트/unit/119945?tab=curriculum
src/reducer/index.tsx
import {combineReducers} from 'redux';
import counter from './counter';
import todos from './todos';
const rootReducers = combineReducers({
counter,
todos
})
export default rootReducers
src/reducer/counter.tsx
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;
src/reducer/todos.tsx
enum ActionType{
ADD_TODO = "ADD_TODO",
DELETE_TODO ="DELETE_TODO"
}
interface Action {
type:ActionType;
text:string;
}
const todos = (state = [] , action :Action) => {
switch(action.type){
case 'ADD_TODO':
return [...state, action.text] ;
default :
return state
}
}
export default todos
index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {legacy_createStore as createStore } from 'redux';
import rootReducers from './reducers';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const store =createStore(rootReducers);
store.dispatch({
type:"ADD_TODO",
text:"USE REDUX"
})
console.log('store.getState' , store.getState());
const render = ()=>root.render(
<React.StrictMode>
<App
value={store.getState()}
onIncrement={()=> store.dispatch({type:"INCREMENT"})}
onDecrement={()=> store.dispatch({type:"DECREMENT"})}
/>
</React.StrictMode>
);
render();
store.subscribe(render);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
96. Redux Provider
강의:
https://www.inflearn.com/course/따라하는-리액트/unit/119946?tab=curriculum
설치 :
npm i react-redux
index.tsx
const render = ()=>root.render(
<React.StrictMode>
<Provider store={store}>
<App
onIncrement={()=> store.dispatch({type:"INCREMENT"})}
onDecrement={()=> store.dispatch({type:"DECREMENT"})}
/>
</Provider>
</React.StrictMode>
);
App.tsx
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
type Props={
onIncrement: ()=>void;
onDecrement: ()=>void;
}
function App({ onIncrement, onDecrement } :Props) {
const [todoValue, setTodoValue] =useState("");
const handleChange=(e : React.ChangeEvent<HTMLInputElement>)=>{
setTodoValue(e.target.value);
}
const addTodo =(e: React.FormEvent<HTMLFormElement>)=>{
e.preventDefault();
setTodoValue("");
}
return (
<div className="App">
{/* Clicked : {value} times */}
<button onClick={onIncrement}>
+
</button>
<button onClick={onDecrement}>
-
</button>
<form onSubmit={addTodo}>
<input type='text' value={todoValue} onChange={handleChange} />
<input type="submit" />
</form>
</div>
);
}
export default App;
96. useSelector & useDispatch
강의:
https://www.inflearn.com/course/따라하는-리액트/unit/119947?tab=curriculum
App.tsx
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { useSelector } from 'react-redux/es/exports';
import { RootState } from './reducers';
import { useDispatch } from 'react-redux/es/hooks/useDispatch';
type Props={
onIncrement: ()=>void;
onDecrement: ()=>void;
}
function App({ onIncrement, onDecrement } :Props) {
const dispatch =useDispatch();
const counter =useSelector((state : RootState)=>state.counter);
const todos : string[] =useSelector((state : RootState)=>state.todos);
const [todoValue, setTodoValue] =useState("");
const handleChange=(e : React.ChangeEvent<HTMLInputElement>)=>{
setTodoValue(e.target.value);
}
const addTodo =(e: React.FormEvent<HTMLFormElement>)=>{
e.preventDefault();
dispatch({
type:"ADD_TODO",
text:todoValue
});
setTodoValue("");
}
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>
</div>
);
}
export default App;
src/reducers/index.tsx
import {combineReducers} from 'redux';
import counter from './counter';
import todos from './todos';
const rootReducers = combineReducers({
counter,
todos
})
export default rootReducers;
export type RootState = ReturnType<typeof rootReducers>;
댓글 ( 4)
댓글 남기기