React (9) 썸네일형 리스트형 투두앱 만들기 5: 투두 수정하기 수정하기 구현은 전편 삭제하기와 비슷합니다. 내장함수 map을 이용하여 onToggle함수를 작성하고 App->TodoList->TodoListItem순으로 전달해줍니다. onToggle import React, { useState, useRef, useCallback } from "react"; import TodoInsert from "./components/TodoInsert/TodoInsert"; import TodoList from "./components/TodoList/TodoList"; import TodoTemplate from "./components/TodoTemplate/TodoTemplate"; const App = () => { const [todos, setTodos] = us.. 투두앱 만들기 3: 투두 추가하기 1,2편을 통해 UI부분을 만들었습니다. 이제 실제로 투두를 추가하거나 제거하는등의 기능을 구현할 차례입니다. 투두 배열 생성 App.js import React, { useState, useRef, useCallback } from "react"; import TodoInsert from "./components/TodoInsert/TodoInsert"; import TodoList from "./components/TodoList/TodoList"; import TodoTemplate from "./components/TodoTemplate/TodoTemplate"; const App = () => { const [todos, setTodos] = useState([]); const nextId = .. 투두앱 만들기 2: TodoInsert, TodoList, TodoListItem 1편에 이어 기본 컴포넌트를 작성하겠습니다. components 디렉토리 밑에 TodoInsert, TodoList, TodoListItem 폴더를 생성하고 밑에 사진처럼 파일을 생성해줍니다. TodoInsert TodoInsert는 새로운 투두를 입력하고 추가하기 위한 컴포넌트 입니다. TodoInsert.js import React from "react"; import "./TodoInsert.styles"; import { MdAdd } from "react-icons/md"; import { ToDoInput, ToDoInsert, ToDoButton } from "./TodoInsert.styles"; const TodoInsert = () => { return ( ); }; export def.. 투두앱 만들기 1: TodoTemplate 프로젝트 생성 $ yarn create react-app todo-app 프로젝트 생성 뒤 디렉토리로 이동 후 라이브러리를 설치해줍니다. $ cd todo-app $ yarn add styled-components react-icons 스타일 컴포넌트와 리액트 아이콘을 사용 할 예정이므로 설치해주었습니다. App초기화 import React from 'react'; const App = () => { return hello todo app } export default App; App.js파일에서 기존 컴포넌트의 내용을 삭제하고 위와같이 작성합니다. yarn start 를 입력하여 문제 없는지 확인해봅니다. TodoTemplate 기본 Template으로 화면을 가운데로 정렬하고 투두앱 타이틀을 보여줍니.. 리액트 훅스 Hooks 6: useRef useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용 할 수 있도록 해줍니다. 기본적으로 current속성을 가지고 있는 객체를 반환하고 이 객체는 컴포넌트의 전 라이프사이클을 통해 유지됩니다. useRef로 focus 예시 import React, { useMemo, useState, useCallback, useRef } from "react"; const getMultiply = (numbers) => { console.log("calculating"); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a * b); return sum; }; const Multiply = () => { const [list,.. 리액트 훅스 Hooks 5: useCallback useMemo와 비슷한 useCallback은 메모이제이션된 콜백을 반환하고 렌더링 선능을 최적화해야 할때 사용됩니다. 전편에서 구현한 곱셈 컴포넌트에서 onChange와 onClick 함수를 선언해 주었는데 이러면 컴포넌트가 리렌더링 될때마다 새로 만들어진 함수를 사용하게 됩니다. Multiply.js import React, {useMemo, useState} from 'react'; const getMultiply = numbers => { console.log("calculating"); if(numbers.length === 0) return 0; const sum = numbers.reduce((a,b)=> a*b); return sum; }; const Multiply = () => { co.. 리액트 훅스 Hooks 4: useMemo 메모이제이션된 값을 반환합니다. 메모이제이션이란 간단히 연산의 결과값을 저장해놓고 동일한 입력이 들어오면 그 값을 가져오는 것입니다. 곱셈 컴포넌트 import React, {useMemo, useState} from 'react'; const getMultiply = numbers => { console.log("calculating"); if(numbers.length === 0) return 0; const sum = numbers.reduce((a,b)=> a*b); return sum; }; const Multiply = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(''); const onCh.. 리액트 훅스 Hooks 3: useReducer useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 상태를 다른 값으로 업데이트 해 주고 싶을 대 사용하는 Hook입니다. 리덕스를 사용해 보셨다면 이해하기 쉽습니다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들때는 반드시 불변성을 지켜 주어야 합니다. useReducer로 카운터 구현예시 import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DEC.. 이전 1 2 다음
