[React] 리액트 너 누구냐(리액트는 프레임워크인가 라이브러리인가)

 

 

리액트로 개발을 시작하면서 리액트에 대한 정보를 찾아보게 되었다

그러면서 가장 많이 봤던 주제는 리액트의 정체성에 관한 글이었다

과연 리액트는 프레임워크일까 라이브러리일까?

 

우선 궁금증을 해결하기 위해 구글에 리액트를 검색하면 '라이브러리'라고 나온다

그렇다, 리액트는 라이브러리다.

 

본격적으로 리액트라 왜 라이브러리인지 정리하기 전,

프레임워크와 라이브러리에 대해 정리해보자

 

프레임워크 (Framework)

프레임워크라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어로 '뼈대'를 뜻한다

어떠한 일을 처리하기 위한 구조를 제공하는 것이 바로 프레임워크다

라이브러리 (Library)

라이브러리는 개발에 필요한 것들을 미리 구현해놓은 도구이다

 

차이점

둘은  "제어 흐름" 에 따라 그 의미가 달라진다

프레임워크는 자체적으로 제어 흐름을 가진다

개발자에게 특정 구조와 규칙을 강제하며, 개발자는 프레임워크가 정한 방식대로 코드를 작성해야 한다

 

반면 라이브러리는 개발자가 필요한 기능을 선택적으로 사용할 수 있으며, 전체 응용 프로그램의 제어 흐름은 개발자에게 있다

 

 

리액트가 프레임워크가 아닌 이유

리액트를 사용하면 분명 특정 제약이 존재한다. 그래서 리액트는 라이브러리가 아닌 것 같다는 생각이 든다

 

리액트의 규칙과 권장사항은 아래에 있다

1. JSX 사용: 리액트에서 UI를 작성할 때 JSX (JavaScript XML)를 사용하는 것이 권장됩니다. JSX는 JavaScript 내부에서 UI 구조를 선언하는데 사용되며, 이것은 가독성과 유지보수성을 향상시키는데 도움이 됩니다.
2. 단방향 데이터 흐름: 리액트에서는 단방향 데이터 흐름을 권장합니다. 이는 데이터가 상위 컴포넌트에서 하위 컴포넌트로만 흐르도록 하는 패턴으로, 상태 관리를 예측 가능하게 만듭니다.
3. 컴포넌트 기반 아키텍처: 리액트는 컴포넌트 기반 아키텍처를 사용하는 것을 장려합니다. UI를 작은 컴포넌트로 나누고 이러한 컴포넌트를 조합하여 애플리케이션을 구축하는 방식은 리액트의 핵심 개념 중 하나입니다.
4. 가상 DOM (Virtual DOM) 활용: 리액트는 가상 DOM을 사용하여 UI 업데이트를 효율적으로 처리합니다. 이는 모든 UI를 실제 DOM에 바로 반영하는 대신, 가상 DOM을 통해 변경 사항을 비교하고 업데이트하는 방식을 사용함으로써 성능을 최적화합니다.
5. 컴포넌트 라이프사이클 메서드: 리액트 컴포넌트는 라이프사이클 메서드를 통해 초기화, 업데이트 및 해제 단골을 관리합니다. 개발자는 이러한 메서드를 활용하여 컴포넌트 동작을 제어할 수 있습니다.

 

제약이 존재하긴 하지만 상대적으로 유연하게

적용하기 때문에 라이브러리라고 한다.

 

왜 라이브러리일까?

1. 제어 흐름 부재: 리액트는 개발자에게 전체 애플리케이션의 제어 흐름을 강제하지 않습니다. 개발자는 리액트의 컴포넌트를 사용하여 UI를 만들고, 이러한 컴포넌트를 조합하여 애플리케이션을 작성합니다. 제어 흐름은 개발자가 정의하며, 리액트는 단순히 UI를 업데이트하기 위한 라이브러리입니다.
2. 선택적 사용: 리액트는 필요한 부분만 사용할 수 있는 라이브러리입니다. 리액트는 UI를 생성하고 관리하는 부분에 중점을 두며, 다른 기술과 조합하여 전체 애플리케이션을 개발할 수 있습니다. 이는 리액트를 다른 라이브러리나 프레임워크와 결합하여 사용할 수 있음을 의미합니다.
3. 포괄성 부재: 프레임워크는 애플리케이션의 전체 아키텍처와 제어 흐름을 규정하며, 개발자가 프레임워크의 규칙을 따라야 합니다. 반면 리액트는 UI 관리를 위한 도구로서 더 유연하게 사용할 수 있으며, 애플리케이션의 다른 부분에 대한 결정은 개발자에게 달려있습니다.
4. 사용자 중심: 리액트는 UI 라이브러리로 사용자 중심 설계를 촉진합니다. 이는 컴포넌트 기반 아키텍처로 UI를 재사용 가능한 작은 부분으로 분할하고 관리하는 방식을 촉진합니다. 이러한 사용자 중심 설계는 라이브러리로서의 역할과 잘 부합합니다

 

 

프레임워크와 달리 리액트는

전체 애플리케이션 아키텍처를 제어하지 않으므로 라이브러리로 간주된다고 한다!

 

 

 

 

마치며...

 

이 주제에 관해 계속 스터디 팀원들과 토론하던 어느 날,

한 팀원이 책 구절을 보내주셨다

 

그런데 리액트가 라이브러리냐, 프레임 워크냐를 판단하는 건 전혀 중요하지 않아.
라이브러리, 프레임워크의 개념을 아는 것이 중요하지!
이 점을 꼭 기억해 두라고!

-IT 5분 잡학사전 중-

 

 

그렇다고 하니 

리액트의 정체성보다는 개념을 명확하게 공부하자는 결론

끝!

 

---

여담으로 React도 규칙이 꽤나 깐깐하다고 생각하여 프레임워크라고 의심했으나

Next.js 사용해보니 깐깐 축에도 들지 않는다

라이브러리 인정!

(니가 몬데 하면 할 말은 없습니다...)

 

진짜 끝!