OOP와 FP 그리고 리액트는 어떤 패러다임인지 의문점들이 들어서 여러 곳을 서치해봤다.
많은 포스팅과 공식문서를 봤지만 아직 명확하게 이해가 가지 않는다. 시간을 더 들여서 깊이 공부해봐야겠다. 부분적으로 이해한 것들을 정리해본다.
js가 왜 함수형 언어인지?
JavaScript는 함수형 프로그래밍에 필요한 가장 중요한 기능을 가지고 있기 때문.
- first class 함수: 함수를 값으로 사용하는 기능으로 함수를 인수로 전달하고, 함수를 반환하고, 함수를 변수 및 객체 속성에 할당
- 람다 구문: 간결한 람다lambda는 고차원 함수로 작업하기가 더 쉽다.
- 클로저
js에는 없는 함수형 언어의 기능들
- 순수 : 부수효과가 발생할 수 있는 표현식은 허용되지 않아야한다. -> 코딩 컨벤션으로 해결해야함
- 불변성: 기존 데이터 구조 (예 : 배열 또는 객체)를 변경하는 대신 표현식은 새로운 데이터 구조를 생성해야한다. -> 외부 라이브러리나 es6문법 사용해야 함(const, object.freeze)
- 재귀 : FP 언어에서 재귀는 반복작업을 수행 할 수있는 유일한 방법이어야 한다.(for, while X) -> es6의 꼬리호출최적화 사용(브라우저가 많이 지원 안함.)
리액트는 함수형? 객체지향?
객체지향에서 함수형으로 바뀌는 추세인 듯?
리액트의 컴포넌트를 사용해서 조합하는 방식이 객체지향인건지?
아예 다른 개념인 것 같다. 작은 부분들로 조합해서 큰 것을 만드는 것은 그냥 복잡한 프로그램을 효율적으로 개발하고 관리하기 위한 해결책일 뿐. 이 방법을 사용할 때 객체를 주로 활용할건지 함수를 주로 활용할건지가 OOP와 FP의 차이점인듯??
패러다임의 특징과 OOP/FP
패러다임 모두 각자의 개념을 통해 문제를 작게 쪼개고, 해결한 뒤, 그 해결법을 다시 합쳐 복잡한 문제를 해결한다.
OOP는 객체로 쪼개고, FP는 함수로 쪼개는 것.
OOP는 중복되는 것을 객체를 기준으로 묶어서 제거하고, FP는 함수를 기준으로 묶어서 제거한다.
class컴포넌트를 안 쓰고 함수 컴포넌트를 쓰면 함수형인건지?
함수 컴포넌트 + 훅을 사용하는게 함수형 패러다임에 다깝다고 할 수 있을 것 같다.
그렇다고 컴포넌트 자체가 함수형은 아닌게 컴포넌트에 사이트 이펙트를 유발하는 로직이 포함될 수 있기 때문. 함수형 컴포넌트보다 함수 컴포넌트가 맞는 표현 같다.
리액트의 함수형과 클래스형의 차이?
- 클래스 컴포넌트는 클래스로 컴포넌트를 만든다.
자신의 상태를 컴포넌트에서 관리하고 라이프사이클 메서드나 상태 변경 메소드를 상위 클래스에서 상속받아서 사용한다.- 함수 컴포넌트는 함수로 컴포넌트를 만들고 훅(함수)를 이용해서 상태를 사용하고 라이프 사이클을 구현한다.
컴포넌트마다 자신의 상태를 가지려면 객체의 구조여야했어서 클래스로 만들었지만 클래스의 이런 저런 단점들로 hook이 나왔다.
그럼 함수 컴포넌트의 상태는 어디서 관리되는지?
공식문서에서 설명한 내용
일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. React는 현재 렌더링 컴포넌트를 추적합니다. 각 컴포넌트와 관련된 “메모리 셀”의 내부 목록이 있습니다. 이것은 단지 데이터를 넣을 수 있는 JavaScript 객체입니다. useState()와 같은 Hook을 호출하면 현재 셀을 읽거나 첫 번째 렌더링 중에 초기화한 다음 포인터를 다음 셀로 이동합니다. 이것이 여러 useState() 호출이 각각 독립적인 로컬 state를 얻는 방법입니다.
더 파봐야 이해하겠지만 리액트가 각 현재 렌더링되어있는 컴포넌트의 메모리 셀(객체형태)을 관리하는데 각 셀에는 컴포넌트에서 사용되는 모든 상태가 저장되고, setState를 실행시키면 해당하는 셀의 state를 변경시키는 것 같다. 컴포넌트(ui)와 상태를 분리했다.
바닐라 js class기반 컴포넌트를 함수형으로 만들려면 어떻게 해야하는지?
각 컴포넌트에서 상태를 관리할 수 없게 되니까 컴포넌트에 사용되는 상태를 어딘가에 따로 저장하고 관리하도록 해야하지 않을까? 더 생각해봐야겠다.
