Lifecycle = 생애주기 소프트웨어 생애주기란? 시간의 흐름에 따라 프로그램이 실행되고 종료되는 순간에 따른 단계적인 과정 리액트 컴포넌트의 생애 주기(생명 주기) Mount : 화면에 나타나는 것 Update : 리랜더, state가 바뀌거나 부모가 리랜더되거나, prop이 바뀌어 자신이 리랜더 되는 것 UnMount : 화면에서 사라짐 리액트 생애주기 메서드 리액트는 생애주기별 메서드를 가지고있다. ComponentDidMount : 화면 출력 ComponentDidUpdate : 화면 업데이트 ComponentWillUnmount : 화면 사라지기 다만 클래스형 컴포넌트에서만 사용가능하다. 그러나 우리는 화살표 함수를 이용한 화살표형 컴포넌트만 쓰고있었어서 class형 컴포넌트대신 forkin..

저번시간에 추가한 onDelete 함수의 이름을 onRemove로 변환시켰다. 그리고 수정버튼을 입력해주기전에 지난시간에 만들었던 버튼 속 onClick 이벤트 함수를 가독성을 위해 따로 변수에 저장해주었다. const handleRemove = () => { if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onRemove(id); }; } 삭제하기 그리고 수정하기 버튼을 만들어주었다. 이제 수정하기를 누르면 수정할 수 있는 폼이 내용안에 뜨도록 만들어 줄거다. 수정하기 import { useState } from "react"; 상태 변화를 위해 useState를 불러주고 const [isEdit, setIsEdt] = useState(false); state를..

일기장 리스트 컴포넌트 에 일기장 기록을 삭제할 수 있는 버튼을 만들어준다 //지우고자하는 타겟id const onDelete = (targetId) => { console.log(`${targetId}가 삭제되었습니다`); } 삭제를 위해 App.js에 onDelete 함수를 추가해준다. 프롭스 드릴링(Props Drilling)? 삭제하기를 눌렀을 때 onDelete가 어디로 전달되는 지 과정을 생각해보면 DiaryItem의 부모인 DiaryList가 프롭스로 onDelete를 받은 후 DiaryList에서 DiaryItem으로 내려준다 이처럼 해당 데이터를 받기위해 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 하는 과정을 프롭스 드릴링 이라고한다. 위처럼 DiaryItem에게 전달하기위..

이벤트는 props 를 사용해서 아래에서 위로 데이터는 위에서 아래로 const [data,setData] = useState([]); data를 관리할 전역 state를 선언해준다. 기존 더미데이터를 주석 처리해주고 onCreate 라는 일기데이터를 추가할 함수를 만들어준다. 작성자, 내용, 감정등의 내용을 onCreate함수가 받아서 ssetData를 이용해 data업데이트를 해줄것이다. const onCreate = (author,content,emotion)=>{ const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date } }; 새로운 일기 값을 받아올 수 있도록 파라미터를 넣..

랜더링? 화면에 표시한다 DiaryList 컴포넌트 생성 일기 리스트를 담을 DiaryList.js 컴포넌트를 생성해준다 const DiaryList = () => { return ( 일기 리스트 ); }; export default DiaryList; 생성된 컴포넌트를 App 컴포넌트 에서도 불러온다 import DiaryList from './DiaryList'; function App() { return ( ); } 앱 컴포넌트의 자식으로 배치해줬다. 이제 다이어리에디터 컴포넌트 밑에 다이어리리스트 컴포넌트를 볼 수 있다. 이제 이 리스트에 저장한 일기들을 리스트 형태로 출력시키는게 목표 하지만 처음에 다 만들면 조금 어려울 수 있으니 임시배열을 만들어서 DiaryList에 prop 으로 리스트 전..