TLDRReact에서 Functional Component가 아닌 함수에서 하나의 property로 ReactElement를 받아서 렌더링 하려고 하다가 발생한 에러입니다. 해당 type을 React.ReactElement로 선언하고, 사용하는 곳에서 JSX 형태의 UI를 넣자, ' JSX 요소 형식에 구문 또는 호출 시그니처가 없습니다.' 에러가 발생했습니다. 코드export interface Types { UI: React.ReactElement;}...tmpFunction(); 다음과 같이 type을 선언하고 함수에 Component를 발생하니 위 스크린샷 에러가 발생했습니다. 문제해당 에러가 발생하는 이유는 React.ReactElement와 는 엄밀히 보면 다르기 때문입니다. Componen..

개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..