useState3 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 반환하며, 수정 버튼을 눌렀을 때만 해당 메모가 수정되는 방향으로 정리했다. 그 전에, 수정 및 삭제 요청이 들어갈 때 각 메모의 ID 별로 처리할 수 있도록 컴포넌트를 세분화 시켰다. 1 . 컴포넌트 세분화 - 수정 전 코드 {memo.map((item, index) => { return ( { item._id.$oid } { item.content } 수정 삭제 ) })} 2 . 컴포넌트 세분화 - 수정 후 코드 const EachMemo = ({ memoId, content }) => { return ( { con.. 2023. 12. 2. React App 만들기 - 메모 기능 구현하기 2 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 다음으로는, 할 일을 지울 수 있는 기능을 추가해야 한다. 그 전에, 이전에 만들었던 코드 내용을 보면, 텍스트만 표기되기 때문에, 할 일 리스트에 중복된 데이터가 들어가는 경우 어떤 데이터를 지울지 식별하기 어려움이 있으므로, 할 일 데이터를 배열이 아닌 object 형식으로 변경하고, 각 할 일 에는 할 일의 Id값과 할 일의 value (내용) 을 추가하는 코드로 변경해야 한다. impo.. 2023. 6. 21. React App 만들기 - 시계 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 현재 시간을 반환하는 javascript 내장 함수를 통해 간단하게 구현할 수 있다. let nowtime = new Data(); // 현재 시간 반환 이 기능을 이용해 아래와 같이 코드를 구성했다. React 파일 내 자바스크립트 언어 삽입은 { } 안에 넣어주면 된다. import './App.css'; function App() { let clock = new Date(); // 시간 .. 2023. 6. 15. 이전 1 다음
