리액트에 대해 - 리액트를 사용하는 이유 / virtual DOM

1. react를 왜쓰는지
2. 생명주기란?
3. SPA가 뭔지?
4. virtual DOM이 뭔지?
5. vue와 angular와 비교했을 때 react의 장점은?

 

모르는 개념/단어는 기울임 처리

---

리액트를 왜 써야하는지에 대해 찾아보았다. 

한 마디로 말하자면 복잡한 웹페이지를 쉽게 만들기 위해서이다.

그 특징으로는 가상DOM과 컴포넌트 기반 아키텍쳐가 있다. 

코드 재사용성, 유지보수 측면에서 용이하다.

---

 

지피티 says

순수 자바스크립트로도 웹 개발에 필요한 모든 기능을 구현할 수 있다. 

웹 애플리케이션의 다양한 동작을 제어하고, 사용자 인터페이스를 구성하며, 서버와의 상호작용을 처리할 수 있다. 

 

순수 자바스크립트의 장점 

1. 직접적인 제어 : DOM, 이벤트 핸들링, AJAX 요청 등을 직접 제어할 수 있다.

2. 가벼움 : 외부 라이브러리나 프레임워크를 사용하지 않아 애플리케이션이 상대적으로 가볍다.

3. 종속성 없음 : 특정 라이브러리나 프레임워크에 종속되지 않아 유지보수가 용이할 수 있다.

 

단점

1. 복잡한 상태 관리 : 애플리케이션이 복잡해질수록 상태 관리가 어려워지고 코드가 난잡해진다. 

2. 반복적인 코드 : 유사한 기능을 여러곳에서 구현해야 하는 경우 코드가 반복될 수 있다.

3. 생산성 저하 : ui컴포넌트를 재사용하고 관리하는 것이 어려워져 개발 속도가 느려질 수 있다.

---

리액트란?

페이스북에서 개발(2013)한 자바스크립트 라이브러리로, 사용자 인터페이스 UI를 구축하기 위해 사용됨. 

개발자가 웹사이트와 애플리케이션에서 빠르고 효율적인 사용자 인터페이스를 쉽게 구현할 수 있도록 설계되었다. 

 

리액트의 장점 및 특징

1. 컴포넌트 기반 아키텍처 : UI를 컴포넌트 단위로 분리하여 재사용가능. 코드를 독립적으로 개발하여 유지보수가 용이 (모듈화) 

2. 상태 관리의 용이성 : 리액트 상태 관리 방식 (React Hook, Context API 등)을 통해 복잡한 상태관리를 쉽게 함

    ex. useState() 요런거?

3. 가상 DOM : 실제 DOM 조작을 최소화 하여 성능 향상에 도움.

특히 데이터가 자주 변경되는 대규모 애플리케이션에서 유용하다. 

4. 생태계 : 풍부한 라이브러리, 커뮤니티 지원 등으로 개발 생산성을 높인다 

5. 단방향 데이터 흐름 : 데이터 흐름을 예측 가능하게 하여 상태 관리를 단순하게 하고 디버깅을 용이하게 함 

    ex. props 는 부모 컴포넌트에서 자식 컴포넌트로 전달된다 (?)

6. JSX 문법 사용 : 자바스크립트 안에서 HTML을 작성할 수 있게 해주는 확장 문법이다. 컴포넌트의 구조를 직관적으로 작성하게 해주어 개발 생산성을 높임 

7. Vue나 Angular와 달리 불필요한 HTML 어트리뷰트가 없다

 

단점

1. 러닝커브 : 새로운 개념과 API를 학습하니 초기 학습 곡선이 있을 수 있다. (리액트의 구성 요소와 개념이 이해하기 쉬워 러닝커브가 높지 않다는 의견도 있다. )

2. 종속성 : 특정 라이브러리에 종속되므로, 버전 업데이트나 변경에 따른 영향을 받는다. 

3. 번들링 및 빌드 과정 : 개발 및 배포 과정에서 번들링과 빌드 설정이 필요

프로젝트의 규모와 복잡도, 팀의 숙련도에 따라 적절한 도구를 선택하는 것이 중요

---

리액트의 핵심 요소 - 

가상 DOM 에 대해 좀더 자세히 알아보면

웹브라우저가 웹사이트의 텍스트 문서를 읽어서 DOM 이라는 트리 구조로 바꾸어 사용자에게 보여준다.

웹 개발자들은 사용자의 반응에 따라 이 DOM 트리를 변경하여 웹사이트의 내용을 갱신한다.

하지만 매번 작은 변화가 있을때마다 전체 화면을 새로 그리는건 성능에 좋지 않다.

이를 해결하기 위해 도입된 것이 virtual DOM 이다.

가상 DOM은 실제 DOM의 복제본으로, 웹 개발자들이 변화를 주고 싶은 부분만 가상 돔에서 수정한다.

그 후 리액트는 가상돔과 실제 돔사이의 차이점을 찾아내서 그 차이점만 실제 돔에 반영한다.

왜 위에서 데이터가 자주 변경되는 대규모 애플리케이션에서 리액트가 유용하다고 한 이유를 알겠다..

데이터가 변경될때마다 전체 DOM을 수정하는 것이 아니라 리액트가 가상 DOM에서 변경된 부분만 찾아내서 실제 DOM에 반영해주기 때문

---

Single Page Application , SPA

1. 단일 html 페이지 = html 파일을 1개만 불러오고

- 이후의 모든 동작은 이 페이지 내에서 이루어진다. =  다른 페이지를 보여주고 싶을때 html 부분만 갈아치워서 보여준다 

 

2. 클라이언트 사이드 라우팅  

URL의 변화를 감지해서 페이지를 새로고침 하지 않아도 화면을 전환한다. (React-router 라이브러리를 사용)

 

3. 동적 데이터 로딩 

사용자의 상호작용에 따라 필요한 데이터만 서버로부터 불러와서 업데이트 한다.

 

이러한 특징들로 인해 아래와 같은 이점이 있다. 

1.  빠른 로딩시간 

페이지 전체를 새로 로딩하지 않으므로 페이지 전환이 빠르다 

 

2. 부드러운 사용자 경험

페이지 전환 시 깜빡임이나 새로고침이 없다.

---

Q. 순수 자바스크립트에서도 export, import를 통해 모듈화를 할 수 있는데 이것과 리액트에서 말하는 모듈화와 어떤 차이가 있을까?

 

A. 코드를 모듈화하고 재사용성을 높인다는 점은 같지만, 구현 방식과 적용 범위의 차이가 있다. 

리액트는 UI를 구성하는 컴포넌트 단위로 코드를 모듈화 한다. 

컴포넌트는 상태state와 속성props 를 관리하고 특정 UI를 렌더링 하는 기능을 포함한다. 

props를 통해 부모 컴포넌트와 데이터를 주고받고 (부모→자식 단방향으로), 상태를 관리하여 동적인 UI를 구현한다. 

 

자식 컴포넌트가 부모 컴포넌트의 상태를 직접 변경할 수는 없지만, 이벤트 핸들러를 props로 전달받아 부모 컴포넌트의 상태를 변경하는 함수를 호출할 수 있습니다. 이렇게 하면 자식 컴포넌트도 부모 컴포넌트의 상태를 간접적으로 업데이트할 수 있습니다.