컬렉션 프레임워크? - 컬렉션 (객체의 저장) + 프레임워크(사용방법을 정해둔 라이브러리) - 자바가 널리 알려져 있는 자료구조를 사용해 객체들을 효율적으로 추가, 삭제, 검색할 수 있도록 인터페이스와 구현클래스를 java.util패키지에서 제공하는 것들 - 컬렉션 프레임워크의 주요 인터페이스로 List, Set, Map이 있다 List - 배열과 비슷하게 객체를 인덱스로 관리한다. - 배열과의 차이점은 저장용량이 자동으로 증가하며, 객체를 저장할 때 자동 인덱스가 부여됨 - 리스트 컬렉션은 객체 자체를 저장하는 것이 아니라 객체의 번지를 참조 - 동일한 객체를 중복 저장할 시 동일한 번지를 참조 - null또한 저장이 가능하나, 객체를 참조하지 않는 인덱스 List컬렉션에서 공통적으로 사용가능한 Lis..

원본 일기 데이터 가져오기 앱컴포넌트 Routes안에 edit루트에 id url을 지정해줬다 import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; import DiaryEditor from "../components/DiaryEditor"; const Edit = () => { const [originData, setOriginData] = useState(); const navigate = useNavigate(); const { id } = useParams(); cons..

글작성과 수정이 겹치는 부분이 많아서 DiaryEditor 컴포넌트를 따로 만들었다 import DiaryEditor from "../components/DiaryEditor" const New = () => { return ( ) }; export default New; 그리고 New컴포넌트에서 DiaryEditor를 불러와주었따 헤더 만들기 import { useNavigate } from "react-router-dom"; import MyHeader from "./components/MyHeader" import MyButton from "./components/MyButton" const DiaryEditor = () => { const navigate = useNavigate(); return..

수정 전/ 후 홈 모습 날짜헤더 등록하기 mount가 됨과 동시에 날짜가 표시되어야 하고 월을 이동할 버튼이 필요함 import { useState } from "react"; import MyHeader from './../components/MyHeader' const Home = () => { const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월` return ( ); }; export default Home; useState를 통해 날짜를 set해준다. 전에 헤더로 만들어두었던 MyHeader 컴포넌트를 import 해주고 MyHea..

React Redux useReducer(); 상태관리 함수인 useState 대신 useReducer를 사용할 것이다. 컴포넌트 상태 업데이트 로직을 컴포넌트 바깥이나 다른파일에 작성 후 불러올 수 있다. const [data, dispatch] = useReducer(reducer, []); 앱 컴포넌트안에 useReducer() 훅을 불러온다. reducer const reducer = (state, action) => { let newState = []; switch (action.type) { case 'INIT': { return action.data; } case 'CREATE': { const newItem = { ...action.data } newState = [newItem, ...s..