일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 프로그래머스
- java
- DFS
- 백준
- Redux
- Database
- VIM
- 동적 계획법
- CS
- 안드로이드
- 그레이들
- git
- 알고리즘
- Javascript
- 다이나믹 프로그래밍
- frontend
- Data Structure
- db
- 리트코드
- vscode
- TypeScript
- react
- DP
- Graph
- Python
- 자바
- BFS
- LeetCode
- Algorithm
- network
Archives
- Today
- Total
늘 겸손하게
React - 컴포넌트 기반 아키텍처 본문
컴포넌트 기반 아키텍처
컴포넌트 기반 아키텍처는 큰 애플리케이션을 작은 재사용 가능한 조각으로 나누어 개발 및 유지 보수를 용이하게 만든다.
React는 JavaScript UI 라이브러리로 UI를 구축하기 위해 컴포넌트 기반 아키텍처를 제공한다.
여기서 이야기 하는 컴포넌트 기반 아키텍처를 더 자세히 알아보자.
컴포넌트 기반 아키텍처를 알려면 먼저 컴포넌트가 무엇인지 알아야 한다.
React Component
React의 기본 구성 요소로 UI의 일부분을 정의하며, JavaScript 함수 또는 클래스로 작성된다. 컴포넌트는 props(속성) 및 state(상태)를 사용하여 동작을 정의하고 데이터를 표시한다.
각 컴포넌트는 독립적으로 작동할 수 있어 재사용성과 유지보수성이 뛰어난 장점이 있다.
이러한 컴포넌트를 기반으로 한 아키텍처를 컴포넌트 기반 아키텍처라고 이야기한다.
컴포넌트 기반 아키텍처를 통해 코드를 모듈화 할 수 있다. 여기서 모듈화의 의미를 알아보자.
모듈화
모듈화는 코드를 모듈이라고 불리는 작은 독립적인 부분으로 나누고, 각 모듈이 특정 기능이나 역할을 수행하도록 설계하는 프로그래밍 개념을 나타낸다. 이 개념은 소프트웨어의 가독성, 유지 보수성, 확장성을 향상시키고 모드를 더 쉽게 관리할 수 있도록 도와준다.
모듈화의 핵심 아이디어는
1. 독립성
- 각 모듈은 다른 모듈과 독립적으로 작동
- 모듈 간 의존성 최소화하여 유지 보수성을 높임
2. 재사용성
- 비슷한 기능이 필요한 곳에 재사용
3. 유지 보수성
- 특정 모듈의 수정이 다른 모듈에 영향을 주지 않아 유지 보수가 더 쉽다.
4. 가독성
- 코드 가독성이 높아져 프로젝트 구조를 이해하기 쉬워진다.
마무리
React의 컴포넌트 기반 아키텍처를 통해 가독성이 좋고 유지 보수성과 재사용성이 뛰어난 코드를 작성할 수 있다.
'Programming > React' 카테고리의 다른 글
React : Github-actions로 배포 자동화 (2) | 2023.10.15 |
---|---|
React - Presentational 컴포넌트 & Container 컴포넌트 (2) | 2023.10.14 |
React - Github-pages에 배포하기 (0) | 2023.07.28 |
React - React에 Redux 설치 & 초기 설정 (0) | 2023.07.27 |
React - React Hook & 장점 (0) | 2023.06.29 |