리액트

[React] 일기장 프로젝트 2. 페이지 구현 - 홈화면

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. 헤더 2. 다이어리 리스트 3. 필터 4. 다이어리 아이템 가장 먼저 홈화면의 구조를 보겠습니다. 맨 위에 현재 월을 알려주는 헤더, 그 밑에 필터가 있고, 그 아래에 일기 리스트가 있습니다. Home 컴포넌트를 만든 후, 각 요소를 추가해봅시다. 1. 헤더 1. 날짜 state 만들고 headText 설정 import { useState } from 'react'; const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; 현재 날짜 sta..

[React] 일기장 프로젝트 1. 기초 작업

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다! 목차 1. 기본 세팅 2. useReducer와 Context 만들기 1. 기본 세팅 기본 세팅에서는 크게 4가지를 할 것입니다. 1. 폰트 세팅 2. 레이아웃 세팅 3. 이미지 에셋 세팅 4. 공통 컴포넌트 세팅 1. 폰트 세팅 폰트를 사용할 때는, 해당 폰트가 오픈 폰트 라이선스인지 꼭 확인해야 합니다. 오픈 폰트 라이선스(OFL, Open Font License)는 글꼴 및 관련 SW용으로 특별히 설계된 무료 오픈소스 라이선스입니다. 사용, 번들링, 수정 및 재배포를 허용하는 공통 라이선스에 따라 작업 릴리스가 가능합니다. 오픈폰트 라이선스를 지원하는 대표적인 사이트가 Google Web Fonts입니다. G..

[React] 리액트 생애주기와 useEffect

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다! 목차 1. 리액트 생애주기(Lifecycle) 2. Lifecycle 실습 3. API 호출 1. 리액트 생애주기(Lifecycle) 리액트의 생애주기란, 시간의 흐름에 따라 프로그램이 실행(Mount)되고, 변화(Update)되며, 종료(UnMount)되는 과정입니다. 생애주기별로 여러 함수가 있는데, 이들은 다 클래스로만 사용이 가능합니다. 사실 이때까지 사용한 State, Ref도 클래스로만 사용이 가능했습니다. 하지만 함수형으로 사용하기 위해 저희는 React Hooks를 이용했던 것입니다. 우리가 사용한 useState, useEffect, useRef 형태의 함수형이 모두 React Hooks입니다. 그..

[React] 데이터 삭제하기, 데이터 수정하기

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 보고 복습하고자 작성되었습니다! 이미 작성된 일기 데이터의 삭제와 수정 부분을 만들어보겠습니다. 목차 1. 데이터 삭제 2. 데이터 수정 1. 데이터 삭제 1. DiaryItem 리턴에 삭제 버튼 만들기 2. App.js에 onDelete 함수 만들기 const onRemove = (targetId) => { console.log(`${targetId}가 삭제되었습니다`); }; 일단 콘솔에 출력만 하도록 만들었습니다. 3. 만든 함수를 불러오도록 하기 먼저 DiaryItem의 부모인 DiaryList에 함수를 전달합니다. const DiaryList = ({ onRemove, diaryList }) => {}; 그리고 DiaryList에서 pr..

[React] 데이터 추가 기능

이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다! 목차 1. 컴포넌트, 데이터 구조 분석 2. 데이터 추가 1. 컴포넌트, 데이터 구조 분석 현재까지의 프로젝트 진행 상황을 회고해보겠습니다. 먼저 컴포넌트의 구조입니다. 먼저, 최상단에 App 컴포넌트가 있고, 그 아래에 DiaryEditor와 DiaryList를 접근할 수 있습니다. 우리가 지금 작업할 일기 아이템 추가를 통해, DiaryEditor에서 DiaryList로 데이터가 들어가야 할 것입니다. 하지만, 앞에서 조회 기능을 만들 때는 dummyList를 App 컴포넌트에서 만든 후, 이를 props로 DiaryList에 내려줬습니다. 이렇듯 React에서 데이터는 위에서 아래로 데이터를 내려가는 것밖에 ..

[React] React에서 DOM 조작, 데이터 조회 기능 (리스트 렌더링)

이 블로그는 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다! 목차 1. useRef로 DOM 조작하기 2. 일기 리스트 렌더링(조회기능) 3. 컴포넌트 분할 1. useRef로 DOM 조작하기 DOM(Document Object Model)이란 문서 객체 모델이라는 뜻으로, 웹 페이지의 요소들을 구조화시켜 접근, 조작할 수 있도록 API를 제공해주는 인터페이스입니다. const handleSubmit = () => { if (state.author.length < 1) { alert('작성자는 최소 1글자 이상 입력해주세요.'); return; } if (state.contents.length < 5) { alert('일기 본문은 최소 5글자 이상 입력해주세요.'); return;..

[React] 리액트로 프로젝트 만들기

이 블로그는 한입 크기로 잘라먹는 리액트 강의를 듣고 복습하기 위해 작성되었습니다! 목차 1. 리액트 프로젝트 초기화 2. useState로 사용자 입력 처리 3. 여러 state 한번에 관리하기 1. 프로젝트 초기화 프로젝트를 처음 만드는 과정입니다. 1. 만들고 싶은 위치에 프로젝트 이름으로 폴더 만들기 2. Create-React-App으로 초기화하기 npx create-react-app [프로젝트 이름] (npx가 설치되어있지 않다면 아래 명령어로 따로 설치해야 합니다) npm install npx -g 3. 디렉토리, 파일 정리 위의 명령어로 설치할 경우 [프로젝트명]->[프로젝트명]->[파일들] 이런식으로 디렉토리 구조가 생기므로, [프로젝트명]->[파일들] 이렇게 되도록 파일들을 옮기고, 디..