React : UI를 빌드하기 위한 라이브러리
NextJS : 프레임워크
라이브러리 vs 프레임워크
가장 큰 차이는 제어 흐름에 있음
라이브러리
- 특정 기능을 구현한 코드의 모음
- 개발자가 주도 : 개발자가 필요한 시점에 호출
- 유연한 사용 : 특정 기능이 필요할 때 호출하여 자유도가 높음
- 제어권 유지 : just 도구만 제공. 제어 흐름은 개발자가 해야 함
프레임워크
- 애플리케이션의 구조와 제어 흐름을 미리 정의한 틀
- 프레임워크가 주도 : 프레임워크가 애플리케이션의 흐름 제어, 개발자는 규칙에 맞게 코드를 작성만 하면 됨
- 일관성 있는 구조 : 미리 정의된 구조(ex. 파일구조)와 규칙을 제공하므로 일관적임. (⇒ 유지보수 및 협업 용이)
- 빠른 개발 속도 : 미리 정의되어 있는 틀과 기능들을 사용하여 빠른 개발(⇒ 그래서 유연성은 낮음)
라이브러리도 지켜야 할 규칙이 있는데..?
yes. 하지만 라이브러리에서 그 규칙은 특정 기능을 사용할 때만 적용됨.
반면에 프레임워크는 애플리케이션 전체의 설계와 제어 흐름을 관리하며 더 엄격한 규칙과 구조를 요구
React vs NextJS 예시
- react(library)
- 개발자가 코드를 명시적으로 호출해야 함
- 렌더링을 하기 위해선, ReactDOM.render();로 개발자가 호출
- react 등을 개발자가 import한다
- 개발자가 선택권이 있다
- css : style component 또는 sas..
- Routing : react router 또는 expo router
- 폴더나 파일이름, 폴더구조 맘대로 ㄱㄴ
- next.js(framwork)
- nextJS가 코드를 호출한다
- 렌더링 하기 위해서 개발자는 호출하지 않아도 된다. (알아서 잘 하겠지.. ⇒ 추상화)
- react 등을 import하지 않아도 된다
- 개발자는 nextJS가 시키는대로 규칙을 지켜야 한다.
- app/page.tsx 같은 폴더구조..