거니의 velog

(3) 지우기 기능 구현하기 * 이번에는 지우기 기능을 구현해 보겠다. 리액트 컴포넌트에서 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우, 배열 내장 함수인 filter를 사용하면 매우 간편하다. [1] 배열 내장 함수 filter * filter 함수는 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출하여 새로운 배열을 만들어 준다. * 다음 코드 예제를 한번 확인해 보자. const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const biggerThanFive = array.filter(number => number > 5); console.log(biggerThanFive); // 결과 : [6, 7, 8, 9, 10] * filte..

3. 기능 구현하기 * 이제 일정 관리 애플리케이션이 실제로 동작할 수 있도록 기능을 구현해 보자. (1) App에서 todos 상태 사용하기 * 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리한다. App에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달해 보자. import React, { useState } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; const App =..

2. UI 구성하기 * 앞으로 만들 컴포넌트를 하나하나 용도별로 소개하겠다! 1. TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여 준다. children으로 내부 JSX를 props로 받아 와서 렌더링해 준다. 2. TodoInsert : 새로운 항목을 입력하고 추가할 수 있는 컴포넌트이다. state를 통해 인풋의 상태를 관리한다. 3. TodoListItem : 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트이다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 준다. 4. TodoList : todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여..

* 지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았다. 이 장에서는 지금까지 배운 지식을 활용하여 프론트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 볼 것이다. * 이번 실습은 다음 흐름으로 진행한다. 1. 프로젝트 준비하기 (1) 프로젝트 생성 및 필요한 라이브러리 설치 * create-react-app을 사용하여 프로젝트를 생성해 보자. $ yarn create react-app todo-app * 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하자. $ cd todo-app $ yarn add node-sass classnames react-icons * 이 프로젝트에서 Sass를 사용할 예정이므..