리액트를 다루는 기술
-
React :: 10. 일정관리 애플리케이션 만들기Dev/프론트엔드 2021. 7. 19. 17:19
지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았습니다. 이 장에서는 지금까지 배운 지식을 활용하여 프런트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 보겠습니다. 이번 실습은 다음 흐름으로 진해앟ㅂ니다. 프로젝트 준비하기 - UI 구성하기 - 기능 구현하기 10.1 프로젝트 준비하기 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성하세요. $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하세요. $ cd todo-app $ yarn add node-sass@4.14.1 classnames..
-
React :: 8. HooksDev/프론트엔드 2021. 7. 16. 10:44
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. Hooks는 리액트 v16.8부터 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 해 주었다. Hooks 배우기 리액트 내장 Hooks 사용하기 - 커스텀 Hooks 만들기 8.1 useState Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {val..