React가 필요한 이유 1 (Component 기반 UI 라이브러리)
React는 Component 기반의 UI 라이브러리 입니다. 모든 html 요소들을 컴포넌트화 하여 재사용할 수 있습니다. 레고를 만들어서 조립하는 느낌입니다. 기존 중복 코드로 인해서 발생하는 산탄총 수술을 할 일이 없습니다.
React가 필요한 이유 2 (선언형 프로그래밍)
React는 선언형 프로그래밍 입니다. 선언형 프로그래밍이란 쉽게 말해서 "바로 목적을 바로 말함" 이라고 정리할 수 있습니다.
예시
UI에 up 버튼을 누르면 화면에 숫자가 +1 되고 down을 누르면 -1이 되는 코드가 있습니다.
명령어 프로그래밍 (ex) jquery
1. 결과를 표시할 요소를 가져온다. (id = result)
2. 현재 결과를 10진수 기준, 숫자형으로 변환하여 current 상수에 저장한다.
3. current 상수에 저장된 값을 +1 또는 -1을 하여 요소에 적용한다.선언형 프로그래밍 (ex) React
1. up을 누르면 result +1 down을 누르면 반대로 한다.텍스트로만 봐도 선언형 프로그래밍이 훨씬 직관적이고 짧은 것을 볼 수 있습니다.
요즘 트렌드는 선언형 프로그래밍입니다!!
React가 필요한 이유 3 (virtual DOM)
Dom 이란?
Document Object model의 약자로 문서 객체 모델이라는 뜻입니다. 간단하게 브라우저가 html을 해석해서 보여줄 때 html을 자기가 편한대로 해석할 수 있게 tree 형태로 변환시켜 놓은 객체를 의미합니다.
브라우저는 웹페이지 하나를 보여주기 위해서 굉장히 많은 일을 하고 있습니다. 만약 Dom을 자바스크립트로 계속 변경하게 된다면 브라우저는 필요 이상으로 작업을 수행해야하고 이것은 성능 저하를 야기할 수 있습니다.
이러한 문제를 해결하기 위해 React에서는 virtual Dom을 사용하고 있습니다. 가상의 Dom을 사용하여 update를 미리 시킨 다음에 (렌더링 과정 X) 한번에 real Dom에 update를 시킵니다.
간단하게 말해서 1개씩 5번 update를 할 것을 5개를 1번에 update를 하는 것 입니다.
당연하게 브라우저에 과부화를 예방할 수 있습니다.
해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.
