react - simpleDiary (기본)

이미 구현한 코드로, 코드+분석 정도만 작성할 예정 ~해당 코드는 아래의 강의를 참고하였습니다👀한입 크기로 잘라 먹는 리액트입력되는 값: author, content, emotionuseState를 이용하여 값이 입력됨에 따라 바뀜을 구현

입력값 조건 추가조건에 맞지 않은경우, 해당 입력칸으로 focus

DiaryItem > DiaryList (개별 item 디자인 후 list로 띄우기)

우선 입력한 일기 값을 저장하기 전에, React의 컴포넌트 및 데이터 구조에 대해 생각해봐야한다.현재 만든 react구조를 확인해보면, 아래와 같다.react의 경우 데이터를 위 또는 아래로, 단방향으로만 데이터가 흐르기 때문에 옆으로는 데이터를 오갈 수 없다. 즉

특정 아이템 삭제 선택해당 아이템의 id값을 제외한 모든 item을 다시 setData로 값 갱신'삭제하기' 버튼을 클릭했을 때, 해당 item을 삭제하는 onDelete코드 추가삭제하기 버튼 추가

이 부분은 현재 순회 중(...it)인 객체 it의 id 속성이 targetId와 일치하는지 확인한다. 일치O : 새로운 내용 newContent로 content 속성을 수정한 객체를 반환일치X : it 객체를 그대로 반환 (변화X) useState를 이용해 수정되는