[TIL] 221105

🔥 오늘 한 일

• 프로그래머스 2022 Winter Coding 코테 10:00~12:00
• [Udemy React] Section12-13(최적화 기법, 클래스형 컴포넌트)
• [JS Deep Dive] Chapter13(스코프) p.189~199
• [BearMello] SweetAlert2 이용하여 Modal, Alert창 추가

🧚 알게 된 내용

💡React.memo()

• 인자로 들어간 컴포넌트에 어떤 props가 들어가는지 확인하고,
  입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존 props 값과 비교하도록 리액트에게 전달함
• props 값이 바뀐 경우에만 컴포넌트를 재실행 및 재평가하게 됨
• 부모 컴포넌트가 변경되었지만 그 컴포넌트의 props 값이 바뀌지 않았다면 컴포넌트 실행은 skip

export default React.memo(DemoOutput);

💡useCallback()

컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅
즉, 매번 실행할 때마다 해당 함수를 재생성할 필요가 없다는걸 알릴 수 있음
👉 동일한 함수 객체가 메모리의 동일한 위치에 저장되므로 비교 작업이 가능해짐

• 우리가 선택한 함수를 리액트 내부 저장공간에 저장해서 함수 객체가 실행될 때마다 이를 재사용할 수 있게 해줌

const toggleParagraphHandler = useCallback(() => {
    setShowParagraph((prevShowParagrah) => !prevShowParagrah);
  }, []);

💡useMemo()

useCallback()과 사용법, 역할이 비슷하지만 모든 종류의 데이터를 저장할 수 있음

const sortedList = useMemo(() => {
  return items.sort((a, b) => a - b);
}, [items]);

💡컴포넌트 수명 주기

• componentDidMount()

  • 리액트가 컴포넌트가 마운트된 직후에 이 메소드를 호출
  • 즉, 컴포넌트가 평가되고 DOM에 렌더링될 때 호출
  • = useEffect(...,[])
    
    

• componentDidUpdate()

  • 컴포넌트가 갱신되면 호출됨
    (무언가 상태가 변경되어 컴포넌트가 재평가 & 재렌더링되면 호출됨)
  • = useEffect(..., [someValue])
    
    

• componentWillUnmount()

  • 컴포넌트가 DOM에서 삭제되기 직전에 호출
  • 컴포넌트가 DOM으로부터 삭제되기 전에 다시 호출됨
  • = useEffect(() => { return () => {...}}, [])

🎨 SweetAlert2 적용

기본 alert창이 너무 안 예뻐서 modal이랑 alert창을 새로 만들려고 참고할만한 디자인들을 찾아보다가 SweetAlert라는 모달 모듈을 사용하면 편리할 것 같아서 사용해보았다!

npm install sweetalert2

🔗 SweetAlert2 공식문서
여러 기본 아이콘도 넣을 수 있어서 보다 더 예쁜? Alert창 구현 가능 :>

1. 기본 Alert창

   Swal.fire({
     icon: "success",
     text: "리뷰를 수정하였습니다.",
     button: "확인",
   }).then(() => {
     window.location.reload();
   }); // then()을 통해 Alert창에서 확인버튼을 누르면 새로고침이 되도록 할 수 있다.
   // then() 없이 그냥 새로고침 함수를 호출하면 Alert창이 보이기도 전에 새로고침이 되어버린다.. 

   

2. 확인, 취소 버튼이 있는 모달창
   🔗 [참고자료] How do I change text color in SweetAlert2?

   import Swal from "sweetalert2";
   
   Swal.fire({
     icon: "warning",
     title:
       "<p style='font-size:18px'>" + "해당 리뷰를 삭제하시겠습니까?" + "</p>",
     // 글자 크기가 너무 커서 줄일 방법을 찾다가 이렇게 하니까 적용이 되었다!
     showCancelButton: true,
     confirmButtonText: "확인",
     cancelButtonText: "취소",
     confirmButtonColor: "#AD8B73",
     cancelButtonColor: "#BEBCBA",
   }).then((result) => {
     if (result.isConfirmed) {
       onRemovePost();
     }
   });

   

3. 기본 Alert창보다 작은 Toast창

   기본 모달창은 대체적으로 크기가 큰데 간단한 alert창을 원하는 경우 toast 속성을 사용하면 Toast처럼 커스텀이 가능하다.

   import Swal from "sweetalert2";
   
   const Toast = Swal.mixin({
     toast: true, // <- here!!
     position: "top", // 위에 위치하도록
     showConfirmButton: false, // 확인 버튼 없도록
     timer: 3000, // 3초 후에 사라지도록
     timerProgressBar: true, // 시간 진행바 지정
     width: "400px", // 너비 지정
     didOpen: (toast) => {
       toast.addEventListener("mouseenter", Swal.stopTimer);
       toast.addEventListener("mouseleave", Swal.resumeTimer);
     },
   });
   
   export default Toast;

   

✍️ Diary

코테 연습겸 코테를 봐봤는데 역시나 코테는 어렵다.. 첫문제만 통과,,
코테 실력은 언제 느려나~ 🥲