리액트 훅스가 없었으면 어땠을까..?
Class vs Functional
리액트는 상태관리가 가능한 컴포넌트를 기반으로 만들어진 자바스크립트 라이브러리 이다.
그리고 그 리액트의 컴포넌트는 두가지의 방식으로 사용이 가능했는데,
Class 문법을 사용하는 Class 컴포넌트와, 함수 문법을 사용하는 함수형 컴포넌트가 있었다.
일단 두가지를 표면적으로만 놓고 보자면 함수형 컴포넌트를 사용하는것이 뭔가 편해보인다,
왜냐하면 리액트를 배우기 전, 자바스크립트를 아는 우리에게는 클래스 보단 함수가 더욱 익숙하기 때문이다.
그렇다면 더 편한 함수형 컴포넌트를 사용해서 리액트를 구축하면 되겠군! 이라고 생각했다면
그 생각은 오래가지 않아 잘못됬다는것을 깨닫게 될것이다.
( 이것은 React Hooks가 나오기 전의 상황이다. )
함수형 컴포넌트의 가장 큰 단점이 있었는데, 바로 '상태관리가 불가능하다' 였는데,
이때 당시의 함수형 컴포넌트는 단순한 작업만이 가능했었다, 리액트를 사용함에 있어 상태관리가 불가능하다는
것은 곧 할 수 있는것이 없다 라는 뜻과 같기 때문이다. 좀.. 극단적인것 같긴 하나, 그렇다고 하겠다.
일단 상태라는것은, 웹 애플리케이션을 렌더(render)하는데 있어 영향을 미칠 수 있는 값 이다.
애플리케이션을 구성하는 거의 모든 데이터들이 상태이고, 그 상태들은 변화하거나 추가, 삭제가 되어야 할
동적인 요소들이기 때문에 그들을 관리하는것이 중요하다. 그렇기때문에 상태관리가 리액트 내에서는
상당히 중요한 요소이다.
그런데 이렇게 중요한 상태관리를 하지못하는 함수형 컴포넌트는 많이 쓰이지 못했다. 그렇다면 그 당시에는
클래스 컴포넌트를 사용했다는것인데, 이것 또한 마냥 쉽지만은 않았다, 클래스 문법을 새롭게 배워야 했는데
이게 마냥 쉽지는 않았다. 본인 또한 여전히 어려워하고 있는 문법이다.
그리고 이렇게 생각하는 개발자들이 한두명이 있는게 아니었겠지, 그리고 react team 도 그렇게 생각했나보다.
함수형 컴포넌트에서도 상태를관리할 수 있게 해주는 react hooks 를 개발하게 된다.
이것은 엄청난 일이었고, 개발자들은 조금 더 수월하게 리액트를 이용해서 애플리케이션을 개발 할 수 있었다.
하지만 react hooks 가 나왔다고 해서 클래스 컴포넌트가 아예 묻혀버린것은 아니다, 훅스로
함수형 컴포넌트에서도 상태관리가 가능해진것 뿐이지, 실질적으로 리액트를 더욱 깊게 활용할 수 있는것은
클래스형 컴포넌트이기에 때에 따라 맞게끔 사용하면 될것이다.
리액트 훅스의 종류는 기본 3가지, 추가 7가지 총 10가지로 나와있다 (공식문서 참고)
기본적으로 많이 쓰이는 Hooks 는 useState, useEffect, useContext, useRef 등 이다.
이것들에 대한 자세한 내용은.. 아마 포스팅을 했던거 같은데 기억이 안난다.
뭐 안했으면 나중에 하나하나 정리를 해보겠다.
이번 포스팅은 react Hooks 가 생겨난 배경에 대해 다루었으니 이쯤에서 마치겠다.
결론을 말하자면, 클래스형 컴포넌트는 어려웠고, 함수형 컴포넌트는 쉬웠지만, 함수형 컴포넌트에서는
상태관리가 되지않는 치명적인 단점이 있었어서 함수형 컴포넌트를 사용하는 빈도가 드물었지만
React 팀에서 함수형 컴포넌트에서도 상태를 관리할 수 있게 해주는 react hooks 를 개발함으로써
이제는 함수형에서도 상태관리가 가능해졌다는 것이다.
