=> 비효율적임(전달만 하는 컴포넌트가 많이 존재한다면), PROPS DRILLING이라고 부름
export / export default의 차이
- export(export default는 하나만 쓸수있음)
React.createContext 사용해보기
import React, {
useMemo,
useEffect,
useRef,
useCallback,
useReducer,
} from "react";
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";
const reducer = (state, action) => {
switch (action.type) {
case "INIT": {
return action.data;
}
case "CREATE": {
const created_date = new Date().getTime();
const newItem = {
...action.data,
created_date,
};
return [newItem, ...state];
}
case "REMOVE": {
return state.filter((it) => it.id !== action.targetId);
}
case "EDIT": {
return state.map((it) =>
it.id === action.targetId ? { ...it, content: action.newContent } : it
);
}
default:
return state;
}
};
// 1️⃣createContext() 메소드 쓸 변수 만들어주기, React import 필수 / 2️⃣ export(export default는 하나만 쓸수있음)
export const DiaryStateContext = React.createContext();
function App() {
const [data, dispatch] = useReducer(reducer, []);
const dataId = useRef(0);
const getData = async () => {
const url = "https://jsonplaceholder.typicode.com/comments";
const res = await fetch(url).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++,
};
});
dispatch({ type: "INIT", data: initData });
};
useEffect(() => {
getData();
}, []);
const onCreate = useCallback((author, content, emotion) => {
dispatch({
type: "CREATE",
data: { author, content, emotion, id: dataId.current },
});
dataId.current += 1;
}, []);
const onRemove = useCallback((targetId) => {
dispatch({ type: "REMOVE", targetId });
}, []);
const onEdit = useCallback((targetId, newContent) => {
dispatch({ type: "EDIT", targetId, newContent });
}, []);
const getDiaryAnalysis = useMemo(() => {
//좋은 일기 개수
const goodCount = data.filter((it) => it.emotion >= 3).length;
//안좋은 일기 개수
const badCount = data.length - goodCount;
//좋은 일기 비율
const goodCountRatio = (goodCount / data.length) * 100;
//전체일기를 화면에 찍어줄것임 => return필요, 여러개니까 객체로 리턴
return { goodCount, badCount, goodCountRatio };
}, [data.length]);
const { goodCount, badCount, goodCountRatio } = getDiaryAnalysis;
return (
//3️⃣ 최상위 태그 바꿔주기 DiaryStateContext.Provider
// (이 안에 들어있는 부분은 )이 태그에서 공급하는 데이터를 어디서든 가져다가 쓸수있다는걸 의미
<DiaryStateContext.Provider value={data}>
<div className="App">
<DiaryEditor onCreate={onCreate} />
<div>전체일기:{data.length}</div>
<div>기분 좋은 일기 개수:{goodCount}</div>
<div>기분 나쁜 일기 개수:{badCount}</div>
<div>기분 좋은 일기 비율:{goodCountRatio}</div>
<DiaryList onRemove={onRemove} diaryList={data} onEdit={onEdit} />
</div>
</DiaryStateContext.Provider>
);
}
export default App;
=> value를 전달하면 이런식으로 확인가능하고, 태그 안의 모든 컴포넌트에서 사용가능하다.
DiaryList에서 context로 받은 데이터 사용하기
import { useContext } from "react";
import { DiaryStateContext } from "./App";
import DiaryItem from "./DiaryItem";
const DiaryList = ({ onRemove, onEdit }) => {
// 1️⃣ 이제 prop으로 diaryList받아오지 않아도, context 에서 받은 데이터로 사용가능하다(diaryList 지우기)
const diaryList = useContext(DiaryStateContext);
// 2️⃣ App.js에서 export한 DiaryStateContext는 import해서 사용이 가능하다. useContext의 인자로 넣기
return (
<div className="DiaryList">
<h2>일기리스트</h2>
<h4>{diaryList.length}개의 일기가 있습니다.</h4>
<div>
{diaryList.map((it) => (
<DiaryItem key={it.id} {...it} onRemove={onRemove} onEdit={onEdit} />
))}
</div>
</div>
);
};
DiaryList.defaultProps = {
diaryList: [],
};
export default DiaryList;
=> 당연히 app.js에서 prop으로 전달하던 diaryList도 필요없다!
사실 프롭스 드릴링은
- onEdit, onRemove에서 발생하고 있음!
🙋♀️그럼 provider 컴포넌트에서 onCreate, onRemove, onEdit prop 똑같이 내려주면 안되나? => 그러면 data state 바뀔때마다 리랜더링 되면서 최적화 걸어둔거 다 풀린다
=> 해답! context 중첩해서 만들기(dispatch 함수를 내보내기 위한 context 함수 만들어둔다~~~`)
dispatch 함수를 내보내기 위한 context 함수 만들기
App.js
import React, {
useMemo,
useEffect,
useRef,
useCallback,
useReducer,
} from "react";
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";
const reducer = (state, action) => {
switch (action.type) {
case "INIT": {
return action.data;
}
case "CREATE": {
const created_date = new Date().getTime();
const newItem = {
...action.data,
created_date,
};
return [newItem, ...state];
}
case "REMOVE": {
return state.filter((it) => it.id !== action.targetId);
}
case "EDIT": {
return state.map((it) =>
it.id === action.targetId ? { ...it, content: action.newContent } : it
);
}
default:
return state;
}
};
export const DiaryStateContext = React.createContext(); //오직 diary state를 위한 함수이고
// 1️⃣dispatch 를 위한 함수는 따로 만들어주기(다 같이 만들어버리면 안된다)
export const DiaryDispatchContext = React.createContext();
function App() {
const [data, dispatch] = useReducer(reducer, []);
const dataId = useRef(0);
const getData = async () => {
const url = "https://jsonplaceholder.typicode.com/comments";
const res = await fetch(url).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++,
};
});
dispatch({ type: "INIT", data: initData });
};
useEffect(() => {
getData();
}, []);
const onCreate = useCallback((author, content, emotion) => {
dispatch({
type: "CREATE",
data: { author, content, emotion, id: dataId.current },
});
dataId.current += 1;
}, []);
const onRemove = useCallback((targetId) => {
dispatch({ type: "REMOVE", targetId });
}, []);
const onEdit = useCallback((targetId, newContent) => {
dispatch({ type: "EDIT", targetId, newContent });
}, []);
//2️⃣useMemo를 이용해서 값을 반환하게 만든다(절대 재생성되는일이 없게 []빈 배열로 놓기)
// 두번째 인자로 받는 값이 바뀔때만, useMemo안의 콜백이 실행되게 만드는게 useMemo임
// 왜 useMemo? 안쓰고 그냥 변수에 값 전달하게 만들면 app컴포넌트 시작할때마다 재생성됨
const memoizedDispatches = useMemo(() => {
return { onCreate, onEdit, onRemove };
}, []);
const getDiaryAnalysis = useMemo(() => {
//좋은 일기 개수
const goodCount = data.filter((it) => it.emotion >= 3).length;
//안좋은 일기 개수
const badCount = data.length - goodCount;
//좋은 일기 비율
const goodCountRatio = (goodCount / data.length) * 100;
//전체일기를 화면에 찍어줄것임 => return필요, 여러개니까 객체로 리턴
return { goodCount, badCount, goodCountRatio };
}, [data.length]);
const { goodCount, badCount, goodCountRatio } = getDiaryAnalysis;
return (
// (이 안에 들어있는 부분은 )이 태그에서 공급하는 데이터를 어디서든 가져다가 쓸수있다는걸 의미
<DiaryStateContext.Provider value={data}>
{/* 3️⃣value로 전달 */}
<DiaryDispatchContext.Provider value={memoizedDispatches}>
<div className="App">
{/* 4️⃣ onCreate, onRemove등 다 지워도 전달 받을 수 있음! , DiaryEditor로 넘어감*/}
<DiaryEditor />
<div>전체일기:{data.length}</div>
<div>기분 좋은 일기 개수:{goodCount}</div>
<div>기분 나쁜 일기 개수:{badCount}</div>
<div>기분 좋은 일기 비율:{goodCountRatio}</div>
<DiaryList />
</div>
</DiaryDispatchContext.Provider>
</DiaryStateContext.Provider>
);
}
export default App;
DiaryEditor.js
import React, { useContext, useEffect, useRef, useState } from "react";
import { DiaryDispatchContext } from "./App";
const DiaryEditor = () => {
// 5️⃣ onCreate를 props로 안보내기때문에 없앰
// 6️⃣ useContext로 가져옴
const { onCreate } = useContext(DiaryDispatchContext); // DiaryStateContext에서는 못가져옴
// 7️⃣ 주의: 객체에 있는 값을 가져오는것이기때문에 비구조화할당으로 가져와야한다!!!!
useEffect(() => {
console.log("DiaryEditor Render");
});
const authorInput = useRef(); // useRef() 함수는, mutableobject는 dom요소 접근할수있는 객체를 반환함
const contentInput = useRef();
const [state, setState] = useState({
author: "",
content: "",
emotion: 1,
});
//목적: onChange에 목적이 같은 코드 중복
const handlerChangeState = (e) => {
// console.log(e.target.name);
// console.log(e.target.value);
//name을 우리가 author / content 즉, 초기값 키의 이름과 일치시켜놨으니 사용가능!
setState({
...state, //spread로 전체 펼쳐주고
[e.target.name]: e.target.value,
});
};
//목적: button 클릭할때마다 submit 되게
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);
console.log(state);
alert("저장성공");
setState({
author: "",
content: "",
emotion: 1,
});
};
// setState는 상태를 바꿔주는 함수이기때문에 여기에 접근할 수는 없음,
// 값을 확인하려면 state.author 해서 접근해야함
return (
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
ref={authorInput}
value={state.author} //state만 써주면 객체만 들어감
name="author" //input에서의 name은 데이터 넘길때 넘어가는애~
onChange={handlerChangeState}
/>
</div>
<div>
<textarea
ref={contentInput}
name="content"
placeholder="일기의 내용을 입력해주세요"
value={state.content}
onChange={handlerChangeState}
/>
</div>
<div>
<span>오늘의 감정점수:</span>
<select
name="emotion"
value={state.emotion}
onChange={handlerChangeState}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
</select>
</div>
<div>
<button onClick={handleSubmit}>일기 저장하기</button>
</div>
</div>
);
};
export default React.memo(DiaryEditor); //전체 컴포넌트를 감싸면서 React.memo 활용하게!
DiaryItem.js
import React, { useContext, useEffect, useRef, useState } from "react";
import { DiaryDispatchContext } from "./App";
const DiaryItem = ({
//구조분해할당으로 {} 키값같으면 알아보는것!
author,
content,
created_date,
emotion,
id,
}) => {
// 1️⃣ prop으로 받던 onRemove, onEdit 지우기
// 2️⃣ useContext로 데이터 사용가능하게 만들기
const { onRemove } = useContext(DiaryDispatchContext);
const { onEdit } = useContext(DiaryDispatchContext);
const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);
const localContentInput = useRef();
const [localContent, setLocalContent] = useState(content);
const handleQuitEdit = () => {
setIsEdit(false); //수정상태에서 나가야하므로
setLocalContent(content);
};
const handleEdit = () => {
if (localContent.length < 5) {
localContentInput.current.focus();
return;
}
if (window.confirm(`${id}번째 일기를 수정하시겠습니까?`)) {
onEdit(id, localContent);
toggleIsEdit(); //닫아주기
}
};
const handleRemove = () => {
if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
onRemove(id); //prop으로 DiaryItem에게 전달했으니까, 사용가능~
}
};
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
value={localContent}
onChange={(e) => setLocalContent(e.target.value)}
ref={localContentInput}
/>
</>
) : (
<>{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);
새로운 것은 언제나 재밌어 🎶