새로움으로 가득한,

꾸준한 사람이 되자😎

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 수정 - With 조건부 렌더링 1. DiaryItem.js 수정하기 버튼 생성 2. 삭제 버튼 핸들러 따로 생성 const handleRemove = () => { if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onRemove(id); } }; ~~~~~ 삭제하기 3. 상태변경 수정 함수 생성 // 👉 isEdit => 수정중인지 수정중이 아닌지 값을 보관 const [isEdit, setEdit] = useState(false); // 👉 toggleIsEdit => 원래 isEdit가지고 있던 값을 반전 시킴 => 블리언값 반전 const toggleIsEdit = () => setIsEdit(!isEdit); ..

2022. 2. 21.

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 삭제 1. 삭제버튼 추가 2. 데이터 추가와 마찬가지로 app 컴퍼넌트에 data state값을 바꿔줘야한다 => 삭제할 데이터를 뺀 배열로 업데이트 3. app.js에 onDelete 함수 생성() => DiaryItem에 있는 삭제버튼이 호출 할 수 있도록 부모인 DiaryList.js에 함수 전달 4. DiaryList.js에서 아이템(목록)을 불러오는 부분에 함수 전달 {diaryList.map((it) => ( ))} 5. 버튼 클릭시 함수 호출 하여 id값 전달 const DiaryItem = ({onDelete, id, author, content, emotion, create_date}) => { return ( ~~~~~ { if(window..

2022. 2. 17.

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 추가 - WIth React처럼 생각하기 React의 컴포넌트&데이터 구조 - 유연한 사고를 위해 컴포넌트 트리 그리면서 작업하기 - 같은 레벨에서의 데이터 교환 불가 - 스테이트 끌어올리기를 통해 데이터를 전달 (단방향 이벤트 흐름, 역방향 이벤트 흐름) 1. app.js 일기 배열 함수와 새로운 데이터 추가 함수 생성 function App() { const [data, setData] = useState([]); // 👉 일기데이터 배열 저장 const dateId = useRef(0); // 👉 id의 index 때문에 만듦 // 👉 일기배열에 새로운 데이터를 추가하는 함수 const onCreate = (author, content, emotion)..

2022. 2. 16.

Blog/React.js

목표 - 배열을 이용하여 LIST 조회 - 개별 컴포넌트 생성 1. 리스트를 렌더링할 DiaryList.js 생성 2. App.js에 테스트용 더미데이터 생성 import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; // 더미 데이터 생성 const dummyList = [ { id: 1, // 💡 모든 데이터는 고유한 아이디를 가지고 있는다. author: "더미1", content: "내용11111", emotion: 2, create_date: new Date().getTime() }, { id: 2, author: "더미2", content: "내용222221", emotion: ..

2022. 2. 16.