emotionDiary 일기장 만들기 위 화면처럼 아무것도 입력하지 않아도 name이 적혀있는 것을 알 수 있다. onChange를 이용하면 변경한 author의 값을 실시간으로 반영할 수 있다. 여기서 e는 event를 뜻한다. 여기서는 사용자가 input에 값을 입력을하면 event로 간주한다. 사용자가 input에 값을 입력하면 onChange는 input에 들어오는 값(e)을 가져와 콜백함수로 넘겨준다. input에 입력... onchangeReactuseStateemotionDiaryReact useRef를 이용한 focus기능 맨 위칸의 글자길이가 1미만이면 위칸을 focus하는 기능과, 내용입력칸의 글자길이가 5미만이면 내용입력캉을 focusg하는 기능을 만들어보자. useRef를 import해야한다. useRef는 react내장함수이므로 useState와 같은 방법으로 import한다. useRef에 해당하는 변수를 만들어야한다. 작성자칸은 authorInput으로 내용입력칸은 contentInput으로 만든다... ReactemotionDiaryReact 데이터 삭제하기 삭제버튼을 통해 데이터 리스트를 제거한다. App.js onDelete()를 만든다. onDelete는 DiaryItem에게 보내줘야 하므로 DiaryList를 통해 보내줘야 한다. (DiaryList는 DiaryItem안에 있으므로 DiaryItem통해 보내줘야 한다.) filter를 이용하여 제거할 리스트의 id인 targetId외의 요소들을 리스트로 만든다. 네번째[3](targetId... ReactemotionDiaryReact
일기장 만들기 위 화면처럼 아무것도 입력하지 않아도 name이 적혀있는 것을 알 수 있다. onChange를 이용하면 변경한 author의 값을 실시간으로 반영할 수 있다. 여기서 e는 event를 뜻한다. 여기서는 사용자가 input에 값을 입력을하면 event로 간주한다. 사용자가 input에 값을 입력하면 onChange는 input에 들어오는 값(e)을 가져와 콜백함수로 넘겨준다. input에 입력... onchangeReactuseStateemotionDiaryReact useRef를 이용한 focus기능 맨 위칸의 글자길이가 1미만이면 위칸을 focus하는 기능과, 내용입력칸의 글자길이가 5미만이면 내용입력캉을 focusg하는 기능을 만들어보자. useRef를 import해야한다. useRef는 react내장함수이므로 useState와 같은 방법으로 import한다. useRef에 해당하는 변수를 만들어야한다. 작성자칸은 authorInput으로 내용입력칸은 contentInput으로 만든다... ReactemotionDiaryReact 데이터 삭제하기 삭제버튼을 통해 데이터 리스트를 제거한다. App.js onDelete()를 만든다. onDelete는 DiaryItem에게 보내줘야 하므로 DiaryList를 통해 보내줘야 한다. (DiaryList는 DiaryItem안에 있으므로 DiaryItem통해 보내줘야 한다.) filter를 이용하여 제거할 리스트의 id인 targetId외의 요소들을 리스트로 만든다. 네번째[3](targetId... ReactemotionDiaryReact