전체 글
-
리덕스 간단한 주요 개념Programming/JavaScript 2021. 4. 25. 11:05
리덕스(Redux) 란 Redux는 여러 컴포넌트에 사용되어지는 state를 분리 통합하여 관리할 수 있게끔 하고 이로 인한 안정성을 향상 시킬 수 있는 라이브러리입니다. React의 state와 비슷하지만 사용하는 방식에 있어서는 React의 state에 비해 복잡한 편입니다. Redux도 state를 관리하기 때문에 React의 state를 사용하지 않아도 됩니다. 하지만 상황에 따라 틀린 것이지 무조건 적으로 사용하지 않는 것은 아닙니다 주요 개념 Action 리덕스에서의 Action은 React state처럼 state를 바꾸는 방식입니다. 액션 객체를 가지고 있으며 반드시 type 필드를 가지고 있어야 합니다. const LoggedIn = () => ({ type: "LOGIN" }); con..
-
React 할 일 목록 만들기 ( TodoList ) 추가,수정,삭제,검색Programming/React 2020. 11. 22. 23:52
실습은 npx react-creat-app [projectname] 으로 실습환경 구축 기능은 추가, 수정, 삭제, 검색을 만들도록 하겠습니다. 프로젝트 구조 실습코드 app.js import React, { Component } from 'react'; import ToDoForm from './component/ToDoForm'; import ToDoList from './component/ToDoList'; import './App.css'; class App extends Component { id = 4; state = { toDoList: [ { id: 1, text: '러닝 뛰기', }, { id: 2, text: '공부하기', }, { id: 3, text: '독서하기', }, ], sea..
-
React window.confirm 기능 구현Programming/React 2020. 5. 15. 09:29
실습은 codesandbox를 이용해서 실습했습니다. window.confirm() 메소드는 위와 같이 메시지와 함께 확인 , 취소 버튼으로 구성되어있고, boolean 값을 return합니다. 확인 => true 취소 => false 를 반환하도록 되어있습니다. 실습은 가상으로 게시글을 삭제한다고 했을 때를 생각했습니다. export default function App() { return ( 게시글 삭제 ); } 위와 같이 게시글을 삭제한다고 가정하고 버튼을 클릭했을 시에 confirm으로 반환된 값들을 console.log창에 띄워 주는 함수를 작성하도록 하겠습니다. 우선 useConfirm 함수를 작성하도록 하겠습니다. const useConfirm = (message = null, onConfi..