React (3)

컴포넌트 다루기

• 리액트를 잘 다루기 위해서는 컴포넌트를 잘 만들줄 알아야 하며, 컴포넌트의 중요도는 크다.
• Text, Header, Image, Spacer(하위 컴포넌트 / 요소를 조작하여 자동으로 간격이 생기게 하는 컴포넌트), Spinner, Toggle

Image

• 랜덤 이미지 서비스
  src: { //... defaultValue: 'https://picsum/photos/200'}
• 이미지 플레이스홀더 서비스
• Intersection Observer API ... 컴포넌트가 화면 안에 들어왔는지 여부 확인 가능 (lazy loading / 성능 개선, 네트워크 트래픽 아낄 수 있음)
  prop: lazy(bool), threshold(number), (placeholder(string))
  

---

회고

오늘은 text, header, image 등 자주 사용되는 컴포넌트의 틀을 만들어보는 공부를 하였다.
이미지를 다룰 때 lazy loading 을 사용해서 이미지를 불러오는 것을 제어하는 방법이 조금은 어려웠다. 이 부분에서 상태의 변화가 정확히 어떻게 이루어지는지를 확실히 할 필요가 있겠다는 생각이 들었다.