01.

🌈 React를 사용하는 이유

1. SPA

2. CSR

3. 가상 돔 (Virtual Dom)

4. 선언형 (간결성)

6. Component 단위 작성

---

1. SPA

싱클 페이지 어플리키에션

• 페이지 이동시 서버에 AJAX로 요청하고 서버는 JSON만 전달해준다,
  👉 SPA 방식에서는 페이지 이동시 변경되는 부분만 JSON으로 받아온뒤, 브라우저의 자바스크립트에서 받은 JSON을 토대로 DOM에 변경된 부분만 렌더링 해주기 때문이다.
• SPA는 html 렌더링을 서버가 하는게 아닌, 클라이어트가 받은 JSON을 토대로 하기 때문에 CSR 방식으로 렌더링 한다고 말한다.

✅ 장점

1. 페이지의 필요한 부분만 업데이트한다.
   👉 트래픽이 적고, 페이지 이동이 그만큼 빨라진다.
2. 최초접속시 필요한 모든 정적 리소스들을 다운 받고 이미 방문한 페이지도 캐싱한다.
3. 모듈화나 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도를 빠르게 만들어준다.

---

2. CSR

• 서버로부터 데이터를 받아서 클라이언트에서 렌더링하는 방식이다.
• 서버로부터 데이터를 받아서 바뀐 부분의 데이터가 있는 화면만 새롭게 랜더링함으로서 사용자 경험을 높여주면서 효율적으로 클라이언트 리소스를 사용하게 한다.
• 서버가 HTML CSS JS 파일을 렌더링하는 대신 데이터를 보내줄 경우, 안드로이드, IOS, 웹 모바일 등 다양한 플랫폼이 서버를 공유할 수 있게 되어 효율적인 서버를 운영할 수 있게 된다.

---

3. 가상 돔 (Virtual Dom)

✓ 리액트의 가장 큰 특징 중 하나로, UI의 이상적인 또는 '가상'적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 기념이다.

• 컴포넌트가 리턴하는 값에 의해 만들어지고 실제 보이는 DOM과 비교해서 달라진 부분만 찾아 바꾸게 된다.
• 연산비용이 줄어들게 된다.
• 리액트에서 컴포넌트 단위의 개발이 가능하게 되었다.

📌 가상DOM 이용 방식

1. 데이터가 변경되면 리액트는 가상 DOM에 우선 적용한다.
2. 이전의 가상 DOM과 비교하여 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용한다.

✅ 장점

• 리액트의 렌더링 방식은 DOM전체를 매번 리렌더링했던 이전 방식의 비해 빠르다.
• 애플맄이션의 규모가 클수록, 데이터의 변경이 많을수록 더 큰 힘을 발휘한다.

---

4. 선언형 (간결성)

✓ 코드를 예측 가능하고 디버그하기 쉽게 만들어준다.

• 지역 변수 선언을 줄일 수 있다.
• map, filter, reduce, sort 와 같은 함수를 사용해 결과를 바로 알 수 있는 간결하고 명확한 코드를 작성 가능하다.
• UI를 구성할 때 선언형 스타일을 이용한다.

✅ 장점

• 선언형 스타일과 가상 DOM이 만나면 엄청난 효율성을 발휘한다.

1. 데이터 변화에 따라 변화된 부분에 영향을 받는 부분의 UI만 자동적으로 변경되게 할 수 있다.
2. 개발자의 실수와 신경 쓸 부분을 줄여줄 수 있다.
3. 코드를 간결하고 직관적으로 만들어준다.

---

6. Component 단위 작성

✓ 컴포넌트는 UI를 구성하는 개별적인 뷰의 단위다.

• 재사용이 가능하다.
• 생산성과 유지 보수를 용이하게 한다.
• 컴포넌트가 모여서 하나의 View뷰가 완성된다.