TIL - 2021.10.22

Today Ariticle

• 모두의 네트워크 정리 (5)

• 리뷰는 여기서 - 일일 아티클
  
  

그 외 오늘 참고한 아티클들

Today I Learned

Hoc (Higher Order Component)

React + TypeScript 조합으로 개발하다보면 종종 마주쳤던 문제가 있는데, 특정 값이 undefined인 경우를 어떻게 처리할 것인가??이다.

export default function SampleComponent(){
	const {data} = useData()
	
    return <div>{data.id}</div> // data가 undefined인 경우 에러
}

이런 경우 해결법은 여러가지가 있다.

• 옵셔널 체이닝 data?.id
• undefined인 경우 대체값 지정 data.id ?? -1
• ealry return. if(!data) return
• HOC로 감싸기

export default function HOC({props}){
	const {data} = useData()
    
    if(!data) return <div>data가 없습니다</div>
    return <Component {...props}/>
}

이렇게하면 hooks보다 먼저 조건문을 실행해야하는 경우에 hooks 규칙에 위배되는 상황을 방지할 수 있다. 해당 컴포넌트는 애초에 data가 존재하는 경우에만 렌더되기 때문!

Today Review

• HOC라는걸 들어만 봤는데, 실제로 사용해본 적은 처음이다. 간만에? 지식이 상승한 것 같다는 느낌..