8월 4주차

2023년 08월 29일, 06:15

ref, setRef

카카오톡 SDK를 통해 공유하기 버튼을 작동하게 하는 코드를 짜다가 ref에 HTML 태그가 존재하는 시점에 SDK의 함수를 실행시켜야 했는데, ref는 useEffect의 dependency에 넣어둬도 해당 값에 따라 바뀌지 않는다. 이런 경우에 useState와 ref에 함수를 넘겨서 해결할 수 있다.

const [ref, setRef] = useState(null);

useEffect(() => {}, [ref]);

return <div ref={setRef}></div>

vite의 env를 사용할 때 타입 선언 하기

interface ImportMetaEnv {
  readonly VITE_KAKAOTALK_JS_SDK_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

참고)

CustomEvent, dispatchEvent

CustomEvent로 새로운 이벤트를 생성하고, dispatchEvent로 해당 이벤트를 발송할 수 있다.

// CustomEvent 생성
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 적합한 이벤트 수신기 부착
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨

옵저버 패턴

옵저버 패턴은 여러 객체에 자신을 관찰 중인 객체에 발생하는 모든 이벤트에 대하여 알리는 행동 디자인 패턴이다.

옵저버패턴

장점

  • 개방/폐쇄 원칙 -> 발행인의 코드를 변경하지 않고도 새 구독자를 도입할 수 있다.(반대도 가능)
  • 런타임에 객체 간의 관계들을 형성할 수 있다.

단점

  • 구독자들은 무작위로 알림을 받는다.

참고)