[TIL] 221021

Beanxx·2022년 10월 21일

TIL

🔥 오늘 한 일

🚨 Error Handling

🧚 새롭게 알게 된 내용

✔️ Portal

✍️ Diary

TIL

목록 보기

80/120

🔥 오늘 한 일

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

오늘은 늦잠도 자구, 국취제 마지막 오프 상담땜에 외출하구 왔더니 시간 순삭..
계획했던거 다 못 끝내고, 공부한 내용이 많이 없댜,, 🥲

Beanxx

FE developer

이전 포스트

[TIL] 221020

다음 포스트

[TIL] 221021

TIL

🔥 오늘 한 일

🚨 Error Handling

🐞 기술스택명 아이콘 추가 및 디자인 변경하기

🧚 새롭게 알게 된 내용

✔️ `Portal`

✍️ Diary

[TIL] 221020

[TIL] 221022-23

0개의 댓글