목록웹 자바스크립트 공부 (36)
개발자를 향해...
[실전형 리액트 Hooks] #2 USEEFFECT
#2.0 useeffectsms 를 사용해보자. 버튼을 누르면 수가 감소하거나 증가하는 코드를 작성해보자. import React, { StrictMode, useEffect, useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [anumber, setAnumber] = useState(0); return ( Hi setNumber(number + 1)}>{number} setAnumber(an..
[실전형 리액트 Hooks] #0.0 Instruction to Hooks ~ #1.3 useTabs
이 글은 노마드 코더 님의 [실전형 리액트 Hooks 10개 ]를 수강하며 작성하였습니다. #0.0 Instruction to Nooks 자주 사용하는 hooks를 배워보자. npm 패키지를 인스톨해서 사용해보자. 그리고 hooks를 npm 에 등록할 수 있도록 한다. #0.1 Requirements react에 대한 이해가 있어야한다. react 와 node js가 설치되어있어야한다. hook의 장점을 이해할 수 있어야한다. #0.2 Workflow hook를 자동으로 실행시켜보기 위해 codesendbox르 사용한다. 가입하고 react로 생성한다. 실시간으로 바뀌는 결과 화면을 볼 수 있다. #1.0 instruction to useState hook를 이용해 더이상 클래스를 사용하지 않고 함수형으..
[초보자를 위한 리덕스 101] #4.0 Redux Toolkit ~ #4.5 Conclusions
본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #4.0 Redux Toolkit Redux Toolkit를 사용하면 적은량의 코드로 같은 기능을 구현할 수 있도록한다. 코드가 더 짧아질 수 있다. npm install @reduxjs/toolkit 를 실행한다. #4.1 createAction action을 사용해보자. store.j로 가서 "ADD", "DELETE" 부분과 addToDO, deleteTodo를 삭제하고 다음 코드를 작성한다. const addToDo = createAction("ADD"); const deleteToDo = createAction("DELETE"); 그리고 import { createAction } from "@reduxjs/too..
[초보자를 위한 리덕스 101] #3.4 Deleting To Do ~ #3.6 Conclusions
본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #3.4 Deleting To Do 이제 ToDO.js에서 코드를 작성해보자. import React from "react"; import { connect } from "react-redux"; import { actionCreators } from "../store"; function ToDo({ text, onBtnClick }) { return ( {text} DEL ); } export default connect(null, mapDispatchToProps)(ToDo); 삭제하는 버튼을 작성한다. home에서 이렇게 작성한 것을 Todo.map(toDo=>로 매칭시킨다. {toDos.map(toDo => ( )..