React 는 왜 class 보다 function hook 을 쓰는가?
- REACT & NODE
- 2022. 6. 26.
아래 글은 무시하고 그냥 리액트의 개발 방식 패러다임 때문이다. 순수함수형 방식이라 OOP 를 기본으로 할 때 병렬 처리에 있어 로직도 복잡해지고 UI 교착 상태의 로직을 지속적으로 isolate 하게 다루기도 힘들고 점점 복잡해지기 때문일거라 생각한다.
쓰레드에도 교착상태에 대한 언급이 있기 때문에 그것과 UI 의 상태, 렌더링의 교착상태가 뭔가 비슷해보여서 아래와 같은 생각을 했을 수는 있지만 또한 그러한 이론적 배경의 늬앙스는 맞지만 정확히는 그냥 각 라이브러리들의 개발 방향에 따라 다른 것이고 쓰레드와는 아무 상관이 없다.
쓰레드가 없기 때문. 쓰레드가 있었다면 교착상태에 대한 컨트롤이 가능하므로 객체지향적으로 해도되지만 웹브라우저에 쓰레드는 없으니..
리액트 컴포넌트는 쓰레드가 없어서 선점형 방식으로 개발할 경우 동시다발적 이벤트 및 화면 갱신 그리고 사이드 이펙에서 무결성을 보장하기 힘든 코드가 될 가능성이 높아진다. 클래스 컴포넌트에서 라이프 사이클 메소드에 관련 로직들이 한번에 들어가게 되는데 그렇게 되면 나중에 코드가 난잡해지고 충돌이 일어날 가능성이 높아진다. 함수형 컴포넌트와 훅의 경우 훅은 각각의 상태에 대한 변화 감지를 하고 또한 각 라이프 사이클 메소드라는 개념보다 useEffect 라는 이펙에 중점을 두기 때문에 각 상태와 이벤트들도 각각 독립적으로 컨트롤 할 수 있으며 컴포넌트의 라이프사이클도 이펙 훅으로 컨트롤이 된다. 정확히는 화면의 갱신에 대한 교착 상태 때문. 아이폰을 보면 UI 갱신 쓰레드는 따로 있다.
따라서 클래스 컴포넌트를 사용할 경우 이러한 교착상태에 대한 고려를 충분히 하면서 코딩해야 한다.
결국 컴포넌트라는 것은 상태와 이벤트 아니었던가...
'REACT & NODE' 카테고리의 다른 글
swagger nodejs express (0) | 2022.06.26 |
---|---|
operator linebreak, prettier 와 eslint 를 동시에 사용할 때 (0) | 2022.06.26 |
React 에러 처리, Boundaries 그리고 포인트 (0) | 2021.12.02 |
react-query paginated infinite queries (0) | 2021.11.15 |
react-query useInfiniteQuery (0) | 2021.10.05 |