클래스 컴포넌트
함수 컴포넌트
리액트는 객체지향, 함수형의 특징을 다 가지고 있다.
클래스 컴포넌트와 함수 컴포넌트의 차이는 패러다임과 관련 없다.
클래스 불편함과 비효율적인 부분들을 함수로 대체해 가볍고 편하게 사용하기 위해 훅이 나타난 것.
객체지향에서 함수형으로 바뀌는 추세인 듯?
아예 다른 개념인 것 같다. 작은 부분들로 조합해서 큰 것을 만드는 것은 그냥 복잡한 프로그램을 효율적으로 개발하고 관리하기 위한 해결책일 뿐. 이 방법을 사용할 때 객체를 주로 활용할건지 함수를 주로 활용할건지가 OOP와 FP의 차이점인듯??
패러다임의 특징과 OOP/FP
패러다임 모두 각자의 개념을 통해 문제를 작게 쪼개고, 해결한 뒤, 그 해결법을 다시 합쳐 복잡한 문제를 해결한다.
OOP는 객체로 쪼개고, FP는 함수로 쪼개는 것.
OOP는 중복되는 것을 객체를 기준으로 묶어서 제거하고, FP는 함수를 기준으로 묶어서 제거한다.
함수 컴포넌트 + 훅을 사용하는게 함수형 패러다임에 다깝다고 할 수 있을 것 같다.
그렇다고 컴포넌트 자체가 함수형은 아닌게 컴포넌트에 사이트 이펙트를 유발하는 로직이 포함될 수 있기 때문. 함수형 컴포넌트보다 함수 컴포넌트가 맞는 표현 같다.
- 클래스 컴포넌트는 클래스로 컴포넌트를 만든다.
자신의 상태를 컴포넌트에서 관리하고 라이프사이클 메서드나 상태 변경 메소드를 상위 클래스에서 상속받아서 사용한다.- 함수 컴포넌트는 함수로 컴포넌트를 만들고 훅(함수)를 이용해서 상태를 사용하고 라이프 사이클을 구현한다.
컴포넌트마다 자신의 상태를 가지려면 객체의 구조여야했어서 클래스로 만들었지만 클래스의 이런 저런 단점들로 hook이 나왔다.
공식문서에서 설명한 내용
일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. React는 현재 렌더링 컴포넌트를 추적합니다. 각 컴포넌트와 관련된 “메모리 셀”의 내부 목록이 있습니다. 이것은 단지 데이터를 넣을 수 있는 JavaScript 객체입니다. useState()와 같은 Hook을 호출하면 현재 셀을 읽거나 첫 번째 렌더링 중에 초기화한 다음 포인터를 다음 셀로 이동합니다. 이것이 여러 useState() 호출이 각각 독립적인 로컬 state를 얻는 방법입니다.
더 파봐야 이해하겠지만 리액트가 각 현재 렌더링되어있는 컴포넌트의 메모리 셀(객체형태)을 관리하는데 각 셀에는 컴포넌트에서 사용되는 모든 상태가 저장되고, setState를 실행시키면 해당하는 셀의 state를 변경시키는 것 같다. 컴포넌트(ui)와 상태를 분리했다.
각 컴포넌트에서 상태를 관리할 수 없게 되니까 컴포넌트에 사용되는 상태를 어딘가에 따로 저장하고 관리하도록 해야하지 않을까? 더 생각해봐야겠다.
참고자료
https://ko.reactjs.org/docs/hooks-effect.html
https://thewavelet.tistory.com/36
https://gyuwon.github.io/blog/2020/07/24/react-has-no-functional-components.html