본인은 다른 강의로 이미 리액트를 경험해본적이 있지만
혼자하는 능력이 아직 부족하기에 새로운강의를 선택해서
다시 시작한다는 마음으로 공부하고있다.
이 강의에서 설명하는 리액트가 필요한 이유.
무언가를 새로 배울때 단순 사용법만 배운다면 기술에 대한 시야가 좁아질 수 있기때문에.
기술에 대한 시야가 좁아진다면 문제해결능력이 부족하다고도 생각할 수 있다고 말해준다.
내가 배운대로가 아니거나 겪어본게 아니면 해결할수가없고 해결할 의지도 갖지못하게된다.
리액트가 왜 인기가 있는지에 대해 알아보자.
리액트가 필요한 이유 첫번째.
첫번째로 일단 순수 html로 아주 간단한 자기소개 사이트가 있다고 가정을했을때
(강의 캡쳐)
왼쪽 index 오른쪽 about으로 두개의 페이지로 구성이되어있음
두개의 코드를 살펴보면
이렇게 아티클이라는 파란글씨와 빨간글씨 부분만 빼고 다른부분 모두가 비슷한수준이아닌 똑같다는걸 볼 수 있음.
아티클의 글, 글씨색상만 다른걸 알 수 있음.
그래서 이 웹사이트에는 큰 문제가 있음. 문제는 너무나도 많은 중복되는 부분이 많다는것
지금 만약 헤더부분을 수정해야한다면, 저 헤더부분이 모든 페이지에 들어가있기때문에
모든 파일, 모든 페이지를 수정해야함.
지금은 파일이 두개라 괜찮겠지만 만약 페이지가 100개가된다면, 그걸 다 수정해야하는 불상사가 생김
근데 우리들이 사용하는 웬만한 모든 사이트들은 공통적인 부분이 항상 존재함.
유튜브도 헤더 푸터는 똑같이 되어있음. 보통 헤더,푸터,네비게이션은 똑같이 작성이되어있음
이제 이 코드들을
컴포넌트로 만들어서 사용하는 컴포넌트화 방식으로 사용하게된다면
왼쪽의 기존방식과 컴포넌트화 방식을 보면
빨간색으로 표시가된 부분은 문제가생겨 수정을해야하는 부분인데
기존의 방식은 index,about 두 군데 모두 수정을 해주어야하고, 만약 10개 50개라면 10개 50개 다 수정을 해주어야함,
근데 오른쪽 컴포넌트화 한 파일을 보면 컴포넌트가 정의된 파일 하나만 수정하면 그 파일을 불러서 사용하는 자동으로 수정이 됨.
그래서 결론적으로 컴포넌트방식을 사용하게되면 공통적으로 사용하는 부분의 수정사항이나 문제가 발생했을때 수정하기가 쉬워짐, 유지보수가 좋아짐
근데 우리가 기존에 사용했던 방식만으로는 요소들을 컴포넌트화해서 제작하기 힘듬.
그래서 우리가 리액트를 사용함
React는 Component 기반의 UI 라이브러리임
첫번째 React를 배우고 사용해야하는 이유는 Component기반의 제작이다.
리액트가 필요한 이유 두번째
또 다른 예제로 버튼을 누르면 숫자가 증가하고 감소하는 코드를 작성해주셨다.
위 처럼 자바스크립트로 작성이 된 숫자를 증가,감소 시키는 프로그램을 만들어주셨다.
바닐라자바스크립트로 작성이된 코드를 확인을해보면 플러스와 마이너스 라는 함수안에
이러한 로직을 가지고있다.
로직을 자세히 살펴보면
- 결과를 표시할 요소를 가져온다 (getElementById)
- 현재 결과값을 10진수 기준으로 숫자형으로 변환하고 current라는 상수에 저장한다.
- current상수에 증가라면 +1 감소라면 -1해서 넣는다
이런 어디서부터 어디까지 어떻게까지 동작해야할지 A-Z까지 다 정해주는 프로그래밍 방식을
명령형 프로그래밍 방식이라 부른다.
근데 이렇게 코드가 길면 해석하기도힘들고 작성하기도 힘들것이다.
위 코드를 그냥 플러스를 누르면 결과값에 1씩 증가한다, 마이너스를 누르면 반대로 한다,
라고 목적만 직설적으로 명시하는 방식을 선언형 프로그래밍이라 한다.
그리고 명령형 프로그래밍의 대표적인 기술로는 jQuery가 있고 선언형 프로그래밍 방식에 대표적으로는 React가 있다.
명령형 프로그래밍이 나쁘다는건 아니지만 웹서비스, 프론트엔드적인 측면에서 보면
제이쿼리보단 리액트같은 선언형 프로그래밍이 인기가있는것은 사실이다.
리액트가 필요한 이유 세번째
세번째 이유는 Virtual DOM(가상 돔)
DOM이란 Document Object Model의 약자로 문서 객체 모델 이라는뜻인데,
간단하게 얘기하자면 브라우저가 HTML을 해석해서 우리에게 보여주는데 그 상황에서 HTML을
자기가 편한대로 해석할 수 있게 사진의 오른쪽 형태로 트리형태로 변환시켜놓은 객체를 의미한다.
(1번 그림)
변환된 DOM은
아래 그림과같이 우리의 눈앞에 나타나게된다. (2번 그림)
생각보다 브라우저가 웹페이지 하나를 보여주기위해 많은 일을 하고있다 라는걸 알 수 있음.
만약 사진처럼 DOM을 계속 변경하는 일이 발생한다면?
사진 속 코드는 오른쪽 add 버튼을 누르면 addItem이라는 함수가 실행이되고
list ID를 갖는 ul 태그에 한번에 다섯개씩 li를 추가하는 이벤트이다.
이렇게 새로운 요소들이 추가가될때마다 브라우저는 위의 2번 그림의 작업을 계속해서 하고있음.
사실은 버튼하나 누르면 다섯개씩 추가가되서 동시에 다 하면 되는데
브라우저는 기본적으로 그렇게 동작하지않음.
이유는 자바스크립트의 append가 문장하나하나마다 DOM요소가 추가되기때문임.
그래서 이렇게 잦은 업데이트 상황에서 브라우저는 필요 이상으로 많은 연산을 수행해야하고
그 문제가 성능저하를 일으킴
이 문제를 해결하기위해 생겨난것이 React가 가지고있는 대표적인 특징 Virtual DOM(가상 돔)이다.
아까처럼 자바스크립트가 요소를 추가하는 과정에서 발생하는 변화를 실시간으로 실제 DOM에 업데이트하는게 아니라
위 처럼 가상의 DOM에 미리 업데이트 시켜본 다음 가상의 DOM이라 렌더링 과정을 안거침(화면에 실제로 그리지않음), 한번에 업데이트할 수 있는 빨간부분을 모아서 한번에 실제 DOM에 업데이트 시키는 방식으로 과다연산을 해결할 수 있다.
간단히 얘기하면 다섯번 업데이트 해야할거 한번만에 다섯개를 통째로 업데이트를 한다.
자바스크립트로도 버퍼라는걸 사용하면 가능하지만 고수준의 자바스크립트 지식과 CS지식을 요구함
하지만 React를 사용하면 Virtual DOM(가상 돔)을 자연스럽고 쉽게 사용할 수 있기때문에 React를 사용해야하는 이유이다.
