JavaScript Sec04_1 Why React.js?

1. 리액트를 사용하는 첫번째 이유

---

• 문제점 : Shotgun Surgery problem , 여러 파일에서 같은 코드를 (ex. <header>~</header>, <footer>~</footer> 등) 반복해서 사용하는 경우, 만약 해당 코드를 수정해야 할 일이 있을 때 파일마다 똑같은 부분을 수정해야 한다.

• 해결 방법 : 중복 코드를 컴포넌트로 만들어 하나의 파일에 모아둔다.

이렇게 컴포넌트를 이용하여 코드를 간단하게 줄일 수 있다.

module.js 파일에 컴포넌트들을 모아둔다.

• 이렇게 컴포넌트화 방식을 사용하면 공통으로 사용되는 요소의 유지보수가 수월해진다.
• 하지만 기존에 사용해왔던 방식만으로는 요소들을 컴포넌트로 제작하고 불러다 쓰기가 힘들다.
• 따라서 React를 사용해야만 한다.

⇒ React는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 html 요소들을 전부 컴포넌트로 만들어서 재사용 할 수 있다.

cf) 하나의 파일에 컴포넌트 하나만 사용해야 하는 것은 아니지만 가독성 때문에 보통 그렇게 사용한다.

 

2. 리액트를 사용하는 두번째 이유

---

• 문제점 : 위와 같은 명령형 프로그래밍은 단순한 한 동작을 실행하는 것치고 너무 많은 코드를 필요로 한다.
• 해결 방법 : 프로그램의 목적만 딱 직설적으로 명시하는 선언형 프로그래밍을 사용한다.

• jquery : 명령형 프로그래밍 방식으로 웹 서비스를 설계하는 기술
• react : 선언형 프로그래밍 방식으로 웹 서비스를 설계하는 기술
• 프론트엔드 측면에서 보면 react를 이용한 선언형 프로그래밍 방식이 더 각광받고 있다.

3. 리액트를 사용하는 세번째 이유

---

• DOM (Document Object Model) : 문서 객체 모델, 브라우저가 html파일을 해석할 때, 해석하기 쉽게 html 요소들을 아래와 같은 트리 형태로 변환 시켜 놓은 객체를 의미한다.

• Virtual DOM : React가 가진 가장 대표적인 특징, 렌더링 과정을 거치지 않은 가상의 DOM을 이용하여 여러 번의 연산을 하여 생성할 수 있는 연산 결과를 한 번에 real DOM에 업데이트 할 수 있다
  • 즉, 5번 수행할 연산을 한 번에 연산하여 보여줌으로써 과다 연산을 줄여줄 수 있다.