매일 해내는 개발/React18 [React] Redux-toolkit, json-server, Axios, Thunk Redux-toolkit이란? 리덕스를 개량한 것이라고 생각하면 쉽다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. json-server란? 아주 간단한 DB와 API 서버를 생성해주는 패키지. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함 json-server를 통해서 FE에서는 BE가 하고 있.. 2022. 12. 22. Redux로 투두리스트 만들기 문제 해결 원장님께 질문을 통해 문제를 해결할 수 있었다. 1. checked가 true임에도 화면상에서는 체크가 해제된 이유 => 렌더링이 되지 않았기 때문! 렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다. 왼쪽의 기존 코드는 조건문을 통해 변경시켜주고 오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다. 2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류 이 부분은 set이되지 않아서 발생한 오류이다. 기존의 코드는 다음과 같고 40번째 줄.. 2022. 12. 20. [React] Redux, React-router-dom으로 TodoList만들기 1. 구현모습 1) 메인 페이지 2) 상세 페이지 2. 시나리오 1) 메인페이지에서 input창에 내용 입력하여 버튼 클릭 시 dispatch를 통해 setTodo에 새로운 데이터를 payload로 전송 → 전송된 데이터를 useSelector를 통해 가져온 데이터 리스트를 화면에 뿌림 2) 체크버튼 클릭 시 상태 변경 : 완료↔진행중, dispatch를 통해 isDone 상태 변경내용 전달 3) Todo 제목 클릭 시 상세 페이지로 이동 4) 상세페이지에서는 id, title, contents를 보여줌 5) 수정 버튼 클릭 시 제목, 내용 수정 화면이 나타나고 버튼명은 완료로 변경됨 6) 삭제버튼 클릭 시 해당 todo는 삭제되고 navigate를 통해 메인페이지로 넘어감 7) Home 버튼 클릭시 메.. 2022. 12. 15. [React] Todo리스트 Redux로 만들기 아직 진행중 https://github.com/jeLee94/TodoList/tree/version2-redux GitHub - jeLee94/TodoList Contribute to jeLee94/TodoList development by creating an account on GitHub. github.com 2022. 12. 14. [Redux] 리덕스란? 리덕스 개념의 핵심은 store 0) store == 은행, 정보가 모두 저장되는 곳 1) state = 실제 정보가 저장되는 곳, 내가 직접 접속해서는 안된다. 은행에 있는 돈을 내가 직접 건드릴 수 없듯이 2) reducer = 공급해주는 함수 3) render = 나의 코드, state 값을 참고해서 UI를 만들어주는 코드 * dispatch, subscribe, getState = 은행창구직원 4) getState = state 정보를 요청하고 받아서 render에게 전달해주는 역할 5) subscribe = state 값이 바뀔 때마다 render함수가 호출되도록하여 UI가 자동 업데이트 되도록함 6) action = 버튼을 누르는 등의 호출 7) dispatch = reducer를 호출해서 s.. 2022. 12. 13. [React] 투두리스트 만들기 오늘 한일 1. 컴포넌트 분리해서 투두리스트 다시 만들기 2. 리덕스 완강 https://react-todo-list-rust.vercel.app/ 배포 React App react-todo-list-rust.vercel.app 깃허브 https://github.com/jeLee94/TodoList/tree/version1 2022. 12. 13. [React] 리액트의 생명주기 https://react.vlpt.us/basic/25-lifecycle.html 25. LifeCycle Method · GitBook 25. LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. react.vlpt.us strict mode https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode 2022. 12. 8. [React] 리액트로 todo리스트 만들기 컴포넌트: Todo, Button 추가기능: 가로스크롤 id를 Date.now()로 지정해 id 겹침현상 제거 완료된 모습 App.js import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'; import CustomBtn from './components/CustomBtn'; function App() { const [todo, setTodo] = useState([ { id: Date.now(), title: 'todotest', contents: '리액트기초를 공부해봅시다.', }, { id: Date.now() + 1, title: 'todotest222', contents: '.. 2022. 12. 7. [React] 리액트 기초 개념 컴포넌트/JSX/Props/State 리액트를 공부하는 첫 날이다! 기대된다. 1. 컴포넌트란? 재사용할수 있는 조립 블록. 화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다. 2. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다. *JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 위와 같이 작.. 2022. 12. 5. 이전 1 2 다음
