개념 정리: CSR, SSR, 돔트리, HOC, Hook

 

CSR: Client Side Rendering
- 렌더링이 클라이언트 쪽에서 일어난다.
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 

- 클라이언트는 그것을 받아 렌더링을 시작한다.

 

SSR

- SEO 최적화

- SSR이 서버 자원을 더 많이 사용한다.

 

 

돔트리

- 왜 hook이 바뀔 때 돔트리가 바뀌는건지

 

HOC: High Order Component

- 컴포넌트 로직 재사용을 위한 패턴

- HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.

- 함수형 컴포넌트가 등장하고 나서는 거의 사용되지 않는다. 고차 컴포넌트 지옥에 빠질 수도 있기 때문.

- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수.

- 그냥 Custom Hook을 사용하자.

컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC) | VELOPERT.LOG

 

 

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://surviveasdev.tistory.com/entry/React-hook%EC%9D%B4-%EB%82%98%EC%98%A8-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

https://overreacted.io/ko/a-complete-guide-to-useeffect/