소스코드 링크 확인 부탁드려요.

이번 강의에서는 App.js , DiaryEditor.js , DiaryItem.js 파일만 수정하였습니다.이번에는 전 강의에서 배운 useCallback과 React.memo를 통한 컴포넌트 렌더링 성능 최적화를 하였습니다. 이정환 강사님께서 보통 소스코드 올려주셨는데 여기에는 주소가 안보이네요. 제가 대신 이번 강의에서 수정한 파일 소스코드를 올리겠습니다. 혹시나 문제가 생길시 연락주시면 바로 삭제하겠습니다.먼저 App.js 입니다. import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; function App() { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( 'https://jsonplaceholder.typicode.com/comments' ).then((res) => res.json()); const initData = res.slice(0, 20).map((it) => { return { author: it.email, content: it.body, emotion: Math.floor(Math.random() * 5) + 1, created_date: new Date().getTime(), id: dataId.current++, }; }); setData(initData); }; useEffect(() => { getData(); }, []); const onCreate = useCallback((author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.current, }; dataId.current += 1; setData((data) => [newItem, ...data]); }, []); const onRemove = useCallback((targetId) => { setData((data) => data.filter((it) => it.id !== targetId)); }, []); const onEdit = useCallback((targetId, newContent) => { setData((data) => data.map((it) => it.id === targetId ? { ...it, content: newContent } : it ) ); }, []); const getDiaryAnalysis = useMemo(() => { const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.length]); const { goodCount, badCount, goodRatio } = getDiaryAnalysis; return ( div className="App"> DiaryEditor onCreate={onCreate} /> div>전체 일기 : {data.length}div> div>기분 좋은 일기 개수 : {goodCount}div> div>기분 나쁜 일기 개수 : {badCount}div> div>기분 좋은 일기 비율 : {goodRatio}div> DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} /> div> ); } export default App; DiaryEditor.js 입니다. import React, { useRef, useState } from 'react'; const DiaryEditor = ({ onCreate }) => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: '', content: '', emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = () => { if (state.author.length 1) { authorInput.current.focus(); return; } if (state.content.length 5) { contentInput.current.focus(); return; } onCreate(state.author, state.content, state.emotion); alert('저장 성공!'); setState({ author: '', content: '', emotion: 1, }); }; return ( div className="DiaryEditor"> h2>오늘의 일기h2> div> input ref={authorInput} value={state.author} onChange={handleChangeState} name="author" placeholder="작성자" type="text" /> div> div> textarea ref={contentInput} value={state.content} onChange={handleChangeState} name="content" placeholder="일기" type="text" /> div> div> span>오늘의 감정점수 : span> select name="emotion" value={state.emotion} onChange={handleChangeState} > option value={1}>1option> option value={2}>2option> option value={3}>3option> option value={4}>4option> option value={5}>5option> select> div> div> button onClick={handleSubmit}>일기 저장하기button> div> div> ); }; export default React.memo(DiaryEditor); DiaryItem.js 입니다. import React, { useEffect, useRef, useState } from 'react'; const DiaryItem = ({ onEdit, onRemove, id, author, content, emotion, created_date, }) => { useEffect(() => { console.log(`${id}번 째 아이템 렌더!`); }); const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const localContentInput = useRef(); const handleRemove = () => { if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onRemove(id); } }; const handleQuitEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { if (localContent.length 5) { localContentInput.current.focus(); return; } if (window.confirm(`${id}번 째 일기를 수정하시겠습니까?`)) { onEdit(id, localContent); toggleIsEdit(); } }; return ( div className="DiaryItem"> div className="info"> span> 작성자 : {author} | 감정점수 : {emotion} span> br /> span className="date">{new Date(created_date).toLocaleString()}span> div> div className="content"> {isEdit ? ( textarea ref={localContentInput} value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( {content} )} div> {isEdit ? ( button onClick={handleQuitEdit}>수정 취소button> button onClick={handleEdit}>수정 완료button> ) : ( button onClick={handleRemove}>삭제하기button> button onClick={toggleIsEdit}>수정하기button> )} div> ); }; export default React.memo(DiaryItem);