CSR: Client Side Rendering
- 렌더링이 클라이언트 쪽에서 일어난다.
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.
- 클라이언트는 그것을 받아 렌더링을 시작한다.
SSR
- SEO 최적화
- SSR이 서버 자원을 더 많이 사용한다.
돔트리
- 왜 hook이 바뀔 때 돔트리가 바뀌는건지
HOC: High Order Component
- 컴포넌트 로직 재사용을 위한 패턴
- HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.
- 함수형 컴포넌트가 등장하고 나서는 거의 사용되지 않는다. 고차 컴포넌트 지옥에 빠질 수도 있기 때문.
- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수.
- 그냥 Custom Hook을 사용하자.
Hook
- 클래스 컴포넌트에서만 사용할 수 있던 상태 변화와 라이프 사이클을 hook에서도 사용할 수 있다.
- 계층의 변화 없이 상태 관련 로직을 재사용 할 수 있다. (클래스 컴포넌트라면 HOC 지옥에 빠졌을 것)
- 간결한 코드 / 가독성 향상 / HOC 지옥 해결 / 불필요한 보일러플레이트 코드 제거
- 컴포넌트 사이에서 상태로직을 재사용하기 어렵다.
- Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.
- 독립적인 테스트와 재사용 가능
- Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.
참고
https://blog.hwahae.co.kr/all/tech/11631
https://hahahoho5915.tistory.com/52
https://react.dev/reference/react
https://overreacted.io/ko/a-complete-guide-to-useeffect/
'Development' 카테고리의 다른 글
Next 폴더 구조에 대한 고민: 관심분리 (0) | 2023.07.26 |
---|---|
파일구조 예쁘게 보는 법: 파일트리 (tree) (0) | 2023.07.26 |
Debounce로 중복호출 막기 (useCallback 사용해 함수재생성 방지까지) (2) | 2023.03.05 |
구글 플레이스토어 주문 ID 해석하기 (.. 뒤에 붙은 숫자의 비밀!) (0) | 2023.02.23 |
dayjs 제대로 활용하기: getTimezoneOffset (0) | 2023.02.17 |