React(리액트)란 무엇인가?
React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리이다. 페이스북에서 개발하고 유지 관리하고 있으며, 웹 애플리케이션 개발에서 널리 사용된다. React의 주요 특징과 개념은 다음과 같다.
특징
1. 컴포넌트 기반 아키텍처
UI를 여러 개의 독립적이고 재사용 가능한 컴포넌트로 분할하여 개발한다.
각 컴포넌트는 고유한 상태와 렌더링 로직을 가지며, 다른 컴포넌트와 결합하여 복잡한 UI를 구성한다.
2. 단방향 데이터 흐름
데이터는 상위 컴포넌트에서 하위 컴포넌트로 단방향으로 전달된다.
이는 데이터의 흐름을 예측 가능하게 하고, 애플리케이션 상태를 관리하기 쉽게 만든다.
3. Virtual DOM(가상돔)
실제 DOM을 조작하는 대신, 가상 DOM을 사용하여 DOM 조작을 최소화하고 효율성을 높인다. 상태 변경 시, 변경된 부분만 업데이트하여 성능을 최적화한다.
실제 DOM VS Virtual DOM
1) 실제 DOM
- 정의: 웹 페이지의 구조를 나타내는 트리 구조의 객체 모델
- 단점: DOM을 직접 조작하는 것은 느리고 비효율적. 특히, DOM 업데이트가 잦아질수록 성능에 큰 영향을 미친다.
2) Virtual DOM- 정의: 실제 DOM의 가벼운 사본. 메모리 내에서 관리되며, React는 이를 통해 UI 변경 사항을 관리한다.
- 장점: VDOM은 빠르게 업데이트할 수 있고, 이를 바탕으로 실제 DOM 조작을 최소화하여 성능을 최적화한다.
4. JSX
JavaScript 확장 문법으로, JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있다. JSX는 빌드 과정에서 일반 JavaScript로 변환된다.
5. 리액트 훅 (Hooks)
함수형 컴포넌트에서 상태와 생명주기 메서드를 사용할 수 있게 해주는 기능이다.
예: useState, useEffect
장점
✅ 재사용성: 컴포넌트를 재사용하여 코드 중복을 줄이고, 유지보수를 용이하게 한다.
✅ 성능: Virtual DOM을 사용하여 최소한의 업데이트로 높은 성능을 유지한다.
✅ 커뮤니티: 큰 커뮤니티와 방대한 자료가 있어 학습과 문제 해결이 용이하다.
✅ 확장성: 다양한 플러그인과 도구가 있어, 프로젝트 요구사항에 맞게 확장 가능하다.
라이브러리 VS 프레임워크
보통 리액트는 라이브러리, 앵귤러와 뷰는 프레임워크로 불린다. 리액트가 프레임워크가 아닌 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링하는데 관여하기 때문이다.
-라우팅: react-router-dom
-상태관리: redux, mobx, recoil
-테스트: jest, mocha
리액트는 UI만 관여하기 때문에 라우팅, 상태관리, 테스트는 다른 라이브러리를 가져와 사용한다. 결국엔 이 라이브러리들이 합쳐져서 프레임워크를 이루기 때문에 리액트는 라이브러리이다.
프레임워크
프레임워크는 애플리케이션의 구조를 제공하고, 개발자가 특정 방식으로 코드를 작성하도록 유도한다. 라이브러리에 비해 덜 유연하지만, 구조와 패턴을 강제하여 일관성을 유지한다. 프레임워크는 라이브러리를 포함하고 있다.
특징
- 제어의 역전 (Inversion of Control): 프레임워크가 애플리케이션의 제어 흐름을 관리하며, 개발자가 작성한 코드를 호출한다.
- 구조 제공: 애플리케이션의 구조와 아키텍처를 정의하고, 그에 맞춰 개발하도록 한다.
- 일관성: 프레임워크를 사용하면 일관된 코드 구조와 아키텍처를 유지하기 쉬워진다.
라이브러리
어떤 특정 기능을 모듈화 해놓은 것으로, 개발자가 필요할 때 호출하여 사용한다. 프레임워크에 비해 더 많은 유연성을 제공하며, 필요에 따라 여러 라이브러리를 조합 가능하다.
특징
- 제어 흐름: 개발자가 제어 흐름을 직접 관리하며, 필요한 부분에서 라이브러리 함수를 호출한다.
- 특정 기능: 보통 특정한 기능(예: 데이터베이스 액세스, 네트워크 요청, UI 컴포넌트)을 수행하는 데 집중한다.
- 유연성: 라이브러리는 독립적으로 사용되며, 개발자가 원하는 방식으로 여러 라이브러리를 조합할 수 있다.
리액트 컴포넌트란?
앱을 이루는 최소 단위. 컴포넌트 여러개가 모여 하나의 페이지를 이루게 된다. 컴포넌트가 여러개로 나뉘어져 있기 때문에 하나의 컴포넌트는 여러 곳에서 사용할 수 있고 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다.
특징
-
재사용성: 컴포넌트는 독립적이고 재사용 가능한 구조로 설계되어, 여러 곳에서 동일한 컴포넌트를 사용할 수 있다.
-
구성 가능성: 컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 이를 통해 UI를 계층적으로 구성할 수 있다.
-
상태와 속성: 컴포넌트는 상태(state)와 속성(props)을 가질 수 있습니다. 상태는 컴포넌트의 내부 데이터를 관리하며, 속성은 부모 컴포넌트로부터 전달받는 데이터이다.
-
렌더링: 컴포넌트는 render 메서드 또는 함수형 컴포넌트에서는 반환된 JSX를 사용하여 UI를 정의한다.
종류
원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이들 개발했지만, 리액트에서 Hooks를 발표한 이후부터는 함수형 컴포넌트를 많이 사용하게 되었다.
클래스형 컴포넌트
React.Component를 상속받아 정의하며, 상태 관리와 라이프사이클 메서드를 사용할 수 있다.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* 초기 상태 */ };
}
render() {
return <div>{/* UI 내용 */}</div>;
}
}
함수형 컴포넌트
함수로 정의하며, 상태 관리 및 사이드 이펙트를 처리하기 위해 Hook을 사용할 수 있다.
function MyComponent(props) {
return <div>{/* UI 내용 */}</div>;
}
