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

클래스는 객체의 설계도. 클래스로부터 객체(인스턴스)는 하나가 아닌 여러 개가 만들어 질 수 있다. 이 경우 자바에서는 클래스멤버를 객체마다 모두 가지고 있는대신 인스턴스멤버와 정적멤버로 구분하여 선언할 수 있도록 한다. 인스턴스멤버? 객체마다 가지고 있는 멤버. 객체(인스턴스) 생성 후 사용할 수 있는 필드와 메소드. public class Car { //field int gas; //method void setSpeed(int speed) {...}; } 위 gas 필드와 setSpeed를 외부 클래스에서 사용하려면 new 연산자를 통해 객체를 생성해야한다. Car myCar = new Car(); myCar.gas = 10; myCar.setSpeed(60); Car yourCar = new Car..

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

메소드? - 객체의 동작에 해당하는 중괄호{}블록. - 메소드를 호출하면 중괄호 블록에 있는 모든 코드들이 일괄적으로 실행 리턴타입 메소드이름 ([매개변수선언, ...]){ //메소드 선언부 //메소드 실행부 } void일 경우 리턴값이 없다. 다만 return문을 사용 할 수 있는데, 이 경우 리턴값을 지정하는 것이 아니라 메소드 실행을 강제 종료시키는 역할을 한다. double divide(int x, int y) { double result = (double)x / y; return result; } double result = divide(10.5, 20.0); 리턴타입이 double , 매개변수가 int 타입인 divide에 매개값을 double값으로 넣어주게되면 에러가 발생한다 매개값은 반드시..

이벤트는 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 } }; 새로운 일기 값을 받아올 수 있도록 파라미터를 넣..