React.js
[P2-3. 할 일 관리 앱 만들기] 기능 구현 준비하기
UI를 완료했으니 이제 컴포넌트의 기능을 구현합니다. 먼저 컴포넌트별로 어떤 기능을 구현해야 하는지 다시 살펴보겠습니다. App 컴포넌트: 할 일 데이터 관리하기 Header 컴포넌트: 오늘의 날짜 표시 TodoEditor 컴포넌트: 새로운 할 일 아이템 생성 TodoList 컴포넌트: 검색에 따라 필터링된 할 일 아이템 렌더링 TodoItem 컴포넌트: 할 일 아이템의 수정 및 삭제 구현할 컴포넌트의 기능을 잘 살펴보면, 주로 데이터를 추가(생성)하고, 조회하고, 수정하고, 삭제하는 기능으로 이루어져 있음을 알 수 있습니다. 이렇듯 데이터를 다루는 4개의 기능, 즉 추가(Create), 조회(Read), 수정(Update), 삭제(Delete) 기능을 앞글자만 따서 CURD 라고 합니다. CRUD 는 ..
[P2-2. 할 일 관리 앱 만들기] UI 구현하기
프로젝트 준비를 모두 끝마쳤다면 UI 를 구현하겠습니다. [할 일 관리] 앱의 UI 구현은 페이지의 전체 레이아웃부터 먼저 만들고, 세부 요소는 순서에 따라 차근차근 만들 예정입니다. 페이지 레이아웃 만들기 다음 그림은 이 프로젝트에서 구현할 [할 일 관리] 앱의 최종 형태를 UI 관점에서 보여줍니다. [할 일 관리] 앱의 UI 요소는 마치 핸드폰을 웹 브라우저 위에 올려놓은 것처럼 좌우 여백이 넓으며 페이지의 정중앙에 자리잡고 있습니다. 먼저 App.js 에서 다음과 같이 태그를 추가합니다. src/App.js import "./App.css"; function App() { return ( 헬로 리액트 ); } export default App; 다음에는 index.css 에 작성된 스타일 규칙은 모..
[P2-1. 할 일 관리 앱 만들기] 프로젝트 준비하기
프로젝트 구현에 앞서 필요한 준비 작업을 진행합니다. 프로젝트 1을 준비할 때처럼 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현하겠습니다. 요구사항 분석하기 다음 그림은 이번 장에서 만들 [할 일 관리] 앱을 최종적으로 구현한 모습입니다. 최종 구현 페이지에서 보듯이 [할 일 관리] 앱에는 다음과 같은 기능들이 있습니다. 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다. 할 일(Todo) 을 작성하는 입력 폼이 있고, 버튼을 클릭하면 할 일 아이템을 생성합니다. [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있습니다. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템..
리액트 개발자 도구
'useEffect' 게시글에선 useEffect 를 이용해 State 값이 바뀌면 콘솔에 그 값을 출력했습니다. 그러나 복잡한 리액트 앱을 개발하는 과정에서 State 값이 변경될 때마다 useEffect 를 수정하고 console.log 로 확인한다면 이는 무척 번거로운 일이 될 겁니다. 따라서 이번 절에서는 리액트 앱을 개발할 때 매우 유용하게 사용하는 리액트 개발자 도구(React Developer Tools) 를 소개하려 합니다. 리액트 개발자 도구 설치하기 리액트 개발자 도구는 확장 도구로서 크롬 브라우저에 설치해 사용합니다. 크롬 확장 프로그램을 설치한 경험이 있는 독자라면 쉽게 설치할 수 있겠지만, 처음 써보는 독자라면 설치 과정이 어려울 수 있으므로 차근차근 살펴보겠습니다. 리액트 개발자..
useEffect
함수 useEffect 는 어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅입니다. 이를 "특정 값을 검사한다" 라고 표현합니다. 예컨데 useEffect 를 이용하면 컴포넌트의 State 값이 바뀔 때마다 변경된 값을 콘솔에 출력하게 할 수 있습니다. 첫 번째 프로젝트로 만든 카운터 앱을 수정하면서 함수 useEffect 를 어떻게 사용하는지 알아보겠습니다. 하나의 값 검사하기카운터 앱의 App 컴포넌트에서 State 변수 count 의 값이 바뀌면, 변경된 값을 콘솔에 출력하겠습니다. 비주얼 스튜디오 코드에서 첫 번재 프로젝트로 만든 project1 폴더를 엽니다. App.js 를 다음과 같이 수정합니다. src/App.js import { useState, useEffect } from "r..
