🔥 오늘 한 일
- StudyHaza 플젝
- 스터디 상세페이지 - 기술스택 아이콘 적용 및 디자인 수정
- 커뮤니티 상세페이지 추가
- 커뮤카드에 커뮤 상세페이지 연결
- 프로그래머스 Lv.0 4문제 완료
- [Udemy React] Section9(Portals & Refs)
🚨 Error Handling
🐞 기술스택명 아이콘 추가 및 디자인 변경하기
원래는 위와 같이 기술 스택명만 출력을 했는데 여기서 아이콘도 추가하고, 스택명 배경색을 아이콘 배경색과 동일하게 구현하고 싶었따!
// 아래와 같이 기술스택명에 해당하는 color 선언
const stackBackgrounds = [
{ stack: "Angular", color: "#DD0031" },
{ stack: "Emotion", color: "#E19EDC" },
{ stack: "GraphQL", color: "#E10098" },
{ stack: "NextJS", color: "#000000" },
{ stack: "ReactJS", color: "#61DAFB" },
{ stack: "VueJS", color: "#4FC08D" },
...
];
const ViewStudy = () => {
...
// 기술스택명에 해당하는 color를 필터링해서 style의 background 값으로 넘겨줬다
const pick = (i) => {
const filtered = stackBackgrounds
.filter((el) => el.stack === i)
.map((el) => el.color);
return filtered;
};
return {
<DevStackList>
{data.devStack &&
data.devStack.map((el, idx) => {
return (
// pick()함수를 background 값에 할당해줌
<li key={idx} style={{ background: pick(el) }}>
<img ... />
<div>{el}</div>
</li>
);
})}
</DevStackList>
}
}✨ 코드는 좀 더럽지만,, 어쨋든 구현 결과
🧚 새롭게 알게 된 내용
✔️ Portal
createPortal을 사용하여 해당 컴포넌트의 HTML 내용을 다른 곳으로 포털, 즉 이동시킬 수 있음- 다만, 렌더링되는 실제 DOM 안에서만 가능!
- Modal창
<div>가<div id="root"></div>안 말고 밖에 위치하는게 구조상 더 correct!
⇒ 이럴 때 Modal창을<div id="root"></div>밖에 위치시키는게Portal!!
<!-- index.html -->
...
<body>
...
<div id="backdrop-root"></div> <!-- here -->
<div id="overlay-root"></div> <!-- here -->
<div id="root"></div>
</body>// ErrorModal.js
import ReactDOM from "react-dom";
...
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onConfirm} />;
};
const ModalOverlay = (props) => {
return (
<Card className={classes.modal}>
<header className={classes.header}>
<h2>{props.title}</h2>
</header>
<div className={classes.content}>
<p>{props.message}</p>
</div>
<footer className={classes.actions}>
<Button onClick={props.onConfirm}>Okay</Button>
</footer>
</Card>
);
};
const ErrorModal = (props) => {
return (
<React.Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById("backdrop-root") // 컴포넌트를 위치시킬 위치
)}
{ReactDOM.createPortal(
<ModalOverlay
title={props.title}
message={props.message}
onConfirm={props.onConfirm}
/>,
document.getElementById("overlay-root")
)}
</React.Fragment>
);
};✍️ Diary
오늘은 늦잠도 자구, 국취제 마지막 오프 상담땜에 외출하구 왔더니 시간 순삭..
계획했던거 다 못 끝내고, 공부한 내용이 많이 없댜,, 🥲
FE developer