Inflearn brand logo image

인프런 커뮤니티 질문&답변

김태건님의 프로필 이미지
김태건

작성한 질문수

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

React 환경에서 클래스형 디자인 패턴 활용에 관한 질문

작성

·

167

·

수정됨

0

안녕하세요, React 환경에서 다음 강의를 보며 예제연습중인 수강생입니다.

 

먼저, 함수형 컴포넌트가 주류가 된 현대 React 생태계에서도 클래스형 디자인 패턴이 많이 활용되는지 궁금합니다. 특히 싱글톤, 팩토리, 빌더와 같은 클래스 기반 디자인 패턴들이 여전히 실무에서 많이 사용되고 있는지 알고 싶습니다.

 

또한 이러한 클래스 기반의 디자인 패턴 사용 시, React의 재렌더링 측면에서 성능 이슈가 발생하지는 않는지, 실제 개발 경험에서 어떤 장단점이 있는지 궁금합니다.

답변 2

2

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

함수 컴포넌트 내에서 직접 쓸 일은 거의 없다고 보시면 되고요. 외부에서 데이터를 관리할 때(비즈니스로직 등)는 써볼만 합니다.

김태건님의 프로필 이미지
김태건
질문자

빠른 답변 감사드립니다!

혹시 그렇다면, React에 다음과 같은 디자인 패턴을 적용한다면, 실제로 언제, 어떤 상황에서 이런 패턴을 도입하는 것이 좋은지 명확하지 않아 고민이 됩니다.

예를 들어, 캔버스 그리기 기능을 구현할 때 상태를 클래스 내부에서 관리하는 것이 좋을지, 아니면 React의 state를 통해 컴포넌트 내부에서 관리하는 것이 좋을지에 대한 판단 기준 혹은 아키텍쳐 설계 경험에 대해 여쭤보고 싶습니다.
특히 상태 변화가 빈번한 경우, UI 반영이 필요한 경우, 재사용성이 중요한 경우 등 다양한 상황에서 어떤 방식이 더 적절한지 궁금합니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

리액트에서는 리액트의 훅 패턴으로 최대한 하시는 게 좋고요. 리액트에서 캔버스를 쓴다면 리액트와 캔버스의 상태를 공유하기 힘들어서 캔버스는 클래스로 관리하고 리액트 상태가 바뀔 때마다 useEffect로 캔버스 클래스의 state 변경하는 api를 호출해서 동기화해주면 되겠습니다.

0

안녕하세요, 인프런 AI 인턴입니다. 김태건님.

React 생태계에서 함수형 컴포넌트가 주류가 되면서 클래스를 사용하는 경우는 많이 줄어들었지만, 여전히 디자인 패턴을 적용하는 데 있어 클래스를 활용하는 경우가 있습니다. 특히, 싱글톤, 팩토리, 옵저버 패턴은 특정 상황에서 유용하게 사용될 수 있습니다.

  1. 싱글톤 패턴: 주로 전역적인 상태나 설정을 관리할 때 사용됩니다. 예를 들어, 글로벌 상태 관리 라이브러리처럼 하나의 인스턴스만 필요할 때 적합합니다.

  2. 팩토리 패턴: 객체 생성을 추상화하여 다양한 타입의 객체를 반환할 수 있는 패턴입니다. 특정 복잡한 객체 생성을 캡슐화하기에 용이합니다.

  3. 옵저버 패턴: 주로 이벤트 기반 시스템에서 사용되며, 상태가 변경되었을 때 자동으로 알림을 받을 수 있게 합니다. Redux의 middleware나 Context API와 같은 상태관리 패턴에서도 일부 유사하게 사용될 수 있습니다.

그러나 성능 측면에서는 주의가 필요합니다. React는 재렌더링이 빈번히 발생할 경우 성능에 영향을 받을 수 있습니다. 따라서 클래스 기반으로 구현 시 컴포넌트의 상태 관리가 최적화되지 않는다면 성능 저하가 일어날 가능성도 있습니다. 항상 불변성을 유지하고, 필요한 최적화 방법(useMemo, useCallback 등)을 활용하여 문제를 완화할 수 있습니다.

관련한 강사님의 답변을 찾아보니, 컴포넌트 방식에 대한 제로초님의 의견이 도움이 될 것입니다. 현재 React에서는 클래스형보다는 함수형 컴포넌트를 주로 사용하고 있으며, 꼭 필요한 경우 클래스를 사용하는 것이 좋다고 하네요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김태건님의 프로필 이미지
김태건

작성한 질문수

질문하기