리액트와 프로그래밍 패러다임의 관계

yoon Y·2022년 8월 25일
0

리액트 학습

목록 보기
5/5

리액트 컴포넌트와 패러다임

리액트 클래스 컴포넌트와 함수 컴포넌트의 차이

클래스 컴포넌트

  • React.Component에서 공통 메소드들을 상속받아 사용
  • 라이프 사이클도 포함
  • 각 LifeCycle 메소드에 모든 로직을 집어넣었어야 했음
    • 한 메소드 안에 관심사가 다른 로직들이 관리되므로 유지보수가 어렵다.
    • 코드를 각 LifeCycle 메소드에 중복으로 적어줘야하는 문제

함수 컴포넌트

  • 컴포넌트를 함수로 생성
  • 공통적으로 사용해야하는 로직들을 함수로 불러와 사용하게 함
    • useEffect, setState..
  • LifeCycle을 useEffect훅으로만 제어 가능.
  • 클래스와 달리 로직을 기준으로 해당 로직을 어느 시점에 실행시킬 건지 설정 가능
    • 로직을 관심사 별로 분리해서 관리할 수 있음.
    • 코드가 중복되지 않음.
    • 컴포넌트가 가벼워짐.

리액트의 함수 컴포넌트는 함수형이다?

  • 공식 문서에도 ‘함수형 컴포넌트’라는 말은 없지만 ‘함수 컴포넌트(function component)’라고 설명한다.
  • 함수 컴포넌트는 구현에 따라 순수하거나 순수하지 않을 수 있다.
    • 대표적인 부수 효과 예시로 useEffect사용을 들 수 있음.

리액트는 객체 지향? 함수형?

  • 리액트는 클래스형 컴포넌트 사용 시에 React.Component를 상속하는 것 말고는
    컴포넌트 조합 시 상속이 아닌 합성을 이용한다. -> 부분적으로만 객체지향을 사용하는 듯.
  • 불변성 유지, 선언형 방식이라는 점에서 함수형의 성격도 가지고 있는 것 같다.

리액트는 객체지향, 함수형의 특징을 다 가지고 있다.
클래스 컴포넌트와 함수 컴포넌트의 차이는 패러다임과 관련 없다.
클래스 불편함과 비효율적인 부분들을 함수로 대체해 가볍고 편하게 사용하기 위해 훅이 나타난 것.


정리

리액트는 함수형? 객체지향?

객체지향에서 함수형으로 바뀌는 추세인 듯?


리액트의 컴포넌트를 사용해서 조합하는 방식이 객체지향인건지?

아예 다른 개념인 것 같다. 작은 부분들로 조합해서 큰 것을 만드는 것은 그냥 복잡한 프로그램을 효율적으로 개발하고 관리하기 위한 해결책일 뿐. 이 방법을 사용할 때 객체를 주로 활용할건지 함수를 주로 활용할건지가 OOP와 FP의 차이점인듯??

패러다임의 특징과 OOP/FP
패러다임 모두 각자의 개념을 통해 문제를 작게 쪼개고, 해결한 뒤, 그 해결법을 다시 합쳐 복잡한 문제를 해결한다.
OOP는 객체로 쪼개고, FP는 함수로 쪼개는 것.
OOP는 중복되는 것을 객체를 기준으로 묶어서 제거하고, FP는 함수를 기준으로 묶어서 제거한다.


class컴포넌트를 안 쓰고 함수 컴포넌트를 쓰면 함수형인건지?

함수 컴포넌트 + 훅을 사용하는게 함수형 패러다임에 다깝다고 할 수 있을 것 같다.
그렇다고 컴포넌트 자체가 함수형은 아닌게 컴포넌트에 사이트 이펙트를 유발하는 로직이 포함될 수 있기 때문. 함수형 컴포넌트보다 함수 컴포넌트가 맞는 표현 같다.


리액트의 함수형과 클래스형의 차이?

  • 클래스 컴포넌트는 클래스로 컴포넌트를 만든다.
    자신의 상태를 컴포넌트에서 관리하고 라이프사이클 메서드나 상태 변경 메소드를 상위 클래스에서 상속받아서 사용한다.
  • 함수 컴포넌트는 함수로 컴포넌트를 만들고 훅(함수)를 이용해서 상태를 사용하고 라이프 사이클을 구현한다.
    컴포넌트마다 자신의 상태를 가지려면 객체의 구조여야했어서 클래스로 만들었지만 클래스의 이런 저런 단점들로 hook이 나왔다.

그럼 함수 컴포넌트의 상태는 어디서 관리되는지?

공식문서에서 설명한 내용
일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. React는 현재 렌더링 컴포넌트를 추적합니다. 각 컴포넌트와 관련된 “메모리 셀”의 내부 목록이 있습니다. 이것은 단지 데이터를 넣을 수 있는 JavaScript 객체입니다. useState()와 같은 Hook을 호출하면 현재 셀을 읽거나 첫 번째 렌더링 중에 초기화한 다음 포인터를 다음 셀로 이동합니다. 이것이 여러 useState() 호출이 각각 독립적인 로컬 state를 얻는 방법입니다.

더 파봐야 이해하겠지만 리액트가 각 현재 렌더링되어있는 컴포넌트의 메모리 셀(객체형태)을 관리하는데 각 셀에는 컴포넌트에서 사용되는 모든 상태가 저장되고, setState를 실행시키면 해당하는 셀의 state를 변경시키는 것 같다. 컴포넌트(ui)와 상태를 분리했다.


바닐라 js class기반 컴포넌트를 함수형으로 만들려면 어떻게 해야하는지?

각 컴포넌트에서 상태를 관리할 수 없게 되니까 컴포넌트에 사용되는 상태를 어딘가에 따로 저장하고 관리하도록 해야하지 않을까? 더 생각해봐야겠다.


참고자료
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

profile
#프론트엔드

0개의 댓글