기록하고 싶은 것들

오늘은 일기장의 new 페이지를 만들어 주었다. new페이지는 새로운 일기를 쓸 때 사용하는 페이지로, 기본적으로 일기에 들어갈 날짜, 감정, 내용을 적어서 새로운 일기를 추가해주는 역할을 한다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 '새 일기쓰기'라는 텍스트를 넣어주었고 leftChild에는 기존에 생성했던 버튼 컴포넌트를 부착하여, 버튼을 클릭 시 뒤로 이동하게 설정해주었다. }/> input_date 일기의 날짜를 지정해 줄 수 있는 input태그이다. 날짜를 ISOString방식으로 변환하여 기본값으로 설정하였고, 원하는 날짜를 클릭 시에 변경이 되도록 설정해주었다. setDate(e.target.value)} /> input..

감정 일기장에 들어갈 기본적인 home 페이지를 만들어 주었다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 현재 연도와 월을 넣어주어서, 일기장이 현재 날짜를 잘 반영할 수 있게 만들었다. leftChild와, rightChild 에는 각각 기존에 생성했던 버튼 컴포넌트를 넣어주었고 각각의 버튼을 클릭 시 1달 전,후로 headText가 바뀌게 설정해주었다. const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getM..

현재 만드는 감정일기장의 일기의 data는 CRUD 에 필수적으로 사용되는 요소임이 분명하다. data의 state를 조작하는 함수가 굉장히 많이 생기게 됨에 따라 컴포넌트 내부가 전체적으로 무거워질 것이고, 직접적으로 이 함수를 사용하지 않는 컴포넌트도 하위 컴포넌트에게 전달하기 위해서 props로 전달받게 되는 porps drilling도 발생하게 될 것이다. 따라서 useReducer로 컴포넌트 내부에 있는 함수를 바깥으로 빼내서, 로직을 분리시키고, useContext를 이용하여 전역으로 이 함수들을 관리하고자 한다. 기본적으로 일기장에서 사용할 함수들을 reducer 로 정의하여 컴포넌트 바깥에 위치하게 한다. 이후 useContext를 사용하여 생성한 context를 App에 적용 시킬 수 있..

프로젝트를 진행시에는 버튼과 헤더 같이 자주 사용되는컴포넌트가 존재한다. 이를 매번 새로만드려고 한다면, 엄청난 시간이 걸리며 일일히 관리하는 것도 힘들 것이다. 따라서 버튼, 헤더 컴포넌트를 따로 생성해주고 prop에 따라서 재사용이 가능한 컴포넌트로 제작을 해주었다. MyButton 이 버튼 컴포넌트는 버튼에 들어갈 text,버튼의 종류에 따른 type, 버튼이 클릭시 실행될 콜백함수 onClick을 props로 전달받아, 재사용 가능하게 만들어 주었다. 특히 type에 따라 스타일링을 다르게 하기 위해서 className={["MyButton", `MyButton_${btnType}`].join(" ")} 클래스명을 type에 따라 다르게 받아 주어 스타일링을 해주었다. MyHeader 헤더는 he..

기존에 구현했던 페이지 기능에서, 추가적으로 url에서 params나 query를 가져오는 기능을 구현하였다. 기존 기능에서는 정해진 url로만 이동하였다. 예를 들어 /diary 는 인식하였지만 , /diary/123 는 인식하지 못하였다. diary는 고유의 id를 부여할 예정이므로 Route를 아래와 같이 수정을 해주었다. 코드를 변경함으로써, parameter를 붙여서 다이어리 id를 지정해서 이동할 수 있게 되었지만, 페이지 내부에서는 그 id를 알 수가 없다. 따라서 useParams를 사용하여서 id를 인식할 수 있게 해주었다. id가 10인 것을 console로 통해서 다시 확인해주고 있다. 이후 query의 경우도 useSearchParams를 이용하여 query내부의 값들을 가져올 수 ..

기존에 만든 일기장을 바탕으로, 배포가 가능한 감정일기장을 제작하기로 하였다. 감정 일기장을 제작하기 위해서 프로젝트에 react-app을 설치해주었고, 기본적으로 일기장에 필요한 페이지들을 생성해주었다. Home: 기본 홈 페이지 Diary: 다이어리 세부 내용을 볼 수 있는 페이지 New: 새로운 다이어리를 작성하는 페이지 Edit: 다이어리를 수정하는 페이지 위 4개의 페이지를 생성해준 뒤에, react-router-dom을 이용하여 각각의 페이지로 이동가능하게 Route 기능을 연결해주었다.

오늘은 리덕스를 이용하여 상태관리를 해보는 실습을 진행하였다. 시작하기에 앞서서, 한 곳에 모든 코드를 작성하지 않고, Redux코드를 action, reducers, store 디렉토리로 분리해주면서 코드를 작성했다. Store.js 리덕스 확장프로그램을 사용할 경우 발생하는 에러를 방지해주는 composeEnhancers를 선언해주고, createStore 메서드를 활용해 Reducer를 연결하며, composeEnhancers 로 에러를 방지해주며 Store를 생성해준다. inititalReducer.js Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수를 작성한다. 카트에 item을 추가하는 ADD_TO_CART, 카트에서 item을 제거하는 REMOVE..

오늘은 Redux에 대하여 공부하였다. Redux란? React의 전역 상태를 관리해주기 위한 툴 중의 하나로, 전역 저장소로 부터 직접 state를 꺼내 사용하며 Props Drilling을 방지에 효과적이다. Props Drilling 상위 컴포넌트에서 props를 전달받아, 하위 컴포넌트에게 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미 Redux의 구조 Redux는 다음과 같은 순서로 상태를 관리 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달. Reducer 함수는 Actio..

단방향 데이터 흐름인 React를 사용 시, props를 전달만 하는 컴포넌트가 발생하고 props의 작성과 수정도 어려워짐(props drilling) useContext의 아이디어 컴포넌트에 모든 데이터를 주고, 하위 컴포넌트에 직접 원하는 데이터들을 주어 props drilling을 없앰 useContext 예시 reateContext 내부에 공유하길 원하는 데이터의 초깃값을 넣어두고 value 변수로 묶어준다. UserContext.Provider로 감싼뒤 ,value props에 value를 넣어줌 import React, { createContext, useMemo, useState } from 'react'; import Parent from './Parent'; export const Us..

state의 상태변화 로직이 복잡해질 경우 컴포넌트가 무거워짐, 이는 좋은 현상이 아니기 때문에 로직을 바깥으로 분리하여 관리하기 위해서, useReducer를 사용하는 것이 좋음 useReducer useReducer 예시 const [count,dispatch] = useReducer(reducer,1) //count: state와 동일 dispatch: 상태를 변화하는 action을 발생시키는 함수 //reducer : 일어난 상태변화를 처리 1 : count state의 초기값 실제 코드 적용 예시 useState -> useReducer 사용 import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./..