2021.07.06 React ?

2021.07.06 React ?_ 정리노트

 

 

그간 올해초에 썼던 리액트 글은 싹 밀었다... 그냥 프로젝트를 하기위한 개념 이고 사실상 거의 실패했다고 봐도 무방.. 

 

( 07.07 수정사항 : ㅎ......근데 내가 이미 정리해놓은 개념들이 좀 있어서 몇개는 부활시킬 예정..^^ 벌써 한 3개부활시킨듯 )

 

이번에는 책 사서 완독을 목표로 방학에 스터디하게 되었음. 

 

그래서 첫 시작부터 차근차근 다시 하기로 결정! 

 

http://www.yes24.com/Product/Goods/62597469

리액트를 다루는 기술 - YES24

 

책은 이걸 샀고, 분량이 많은 만큼 먼저 읽으면서 혼자 끄적일 예정.

 

 

오늘은 아예 리액트란 무엇인가 부터 여러 원론적으로 정리하기로 결정.

 

 

리액트?

자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용. MVC ( Model - View - Controller ) 패턴에서 오직 View 만 신경쓰는 라이브러리. 컴포넌트로 동작하며, 컴포넌트는 재사용이 가능한 API 로 일단 템플릿과는 다른 좀 더 복합적인 개념.

 

렌더링 ? 

사용자 화면에 뷰를 보여주는 것을 렌더링이라고 함.

데이터가 변할 때마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공하기 위해서는

'초기 렌더링' '리렌더링 개념' 필요

 

 

초기 렌더링

맨 처음 어떻게 보일지를 정하는 렌더링 .

리액트에서는 render() 함수가 이를 담당. render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 함. html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환.

컴포넌트에서 데이터 변화가 있으면 변형이 된다는 개념보다는 새로운 요소로 아예 갈아끼워 버림. 이 작업 또한 render 함수가 맡아서 함.

이 때, render 함수는 새로운 반환 결과를 바로 DOM 에 반영하지 않고, 이전 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교함. 자바스크립트를 사용하여 최소한의 연산으로 비교하여 차이를 DOM 트리에 업데이트함.

 

 

Virtual DOM

 

먼저 DOM 이 무엇이냐고 물으신다면..

 

https://korinkorin.tistory.com/38

2020.11.27 nav bar active 활성화 기능

 

언제 정리했지.. ㅎ

쨋든 여기에 덧붙인다면, 브라우저에서는 DOM 을 활용하여 객체에 자바스크립트와 CSS 를 적용하고, DOM 은 태그 밑의 태그가 뻗어나가는 tree 형태이다.

 

지속적으로 데이터가 변화하는 대규모 애플리케이션의 경우, DOM 을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있다. 이 문제를 해결하기 위해 리액트에서는 DOM을 최소한으로 조작하는 Virtual DOM 이라는 것을 사용한다. Virtual DOM 은 실제 DOM 에 접근하지 않고, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 실제 DOM 의 가벼운 사본과 비슷. Virtual DOM 동작방식 역시, 위에서 말했던 render 함수와 비슷하다. 

 

데이터를 업데이트한 후, 전체 UI 를 Virtual DOM 에 리렌더링 한 후, 이를 이전의 Virtual DOM 과 비교해서 차이점만 실제 DOM 에 적용하는 것.

 

음..^^ 위에서부터 느낀거지만 어렵군 원론적인 얘기는 역시 어려워...^^

 

그래도 이해한대로 적으면,

리액트는 데이터가 업데이트 될 때마다 render 함수와 Virtual DOM 을 통해서 차이점을 계산하여 최소한의 연산으로, 최소한의 DOM 조작으로 성능을 개선할 수 있는 셈!!

 

 

데이터가 대규모로 업데이트 되는 앱에서는 당연 리액트가 최고지만, 단순한 앱이라면 리액트보다 다른 것들이 성능면에서 뛰어날 수 있겠지!! 한마디로!!!! 업데이트의 처리를 간결하게 도와주는 해결책인 셈 ㅇㅇ!

 

 

 

아 근데 내가 블로그를 쓰면서 왜 당연히 정리했다고 생각한 개념이 있음.

 

바로 프레임워크와 라이브러리 차이점.

 

왜 정리를 안했는지.. 의문이지만 이미 많은 자료들이 있어서 당연히 혼자 이해하고 넘어갔나보다. 그만큼 개념적으로 설명한 사람들이 많으니 나는 내식대로 해석해서 정리해야지

 

프레임워크

말그대로 우리가 프레임워크가 짜놓은 판에서 코드를 짜서 넣는 느낌.

큰 틀은 프레임워크가 제공하고, 우리는 그 규칙대로 코드를 짜는 거라고 나는 정리했다.

내가 써본 것은 장고가 있겠지...! 언젠가 너도.. 다시 오게 될 것이야..

 

라이브러리 

이것도 항상 말뜻대로 보면 사람들이 코딩하기 쉽게 이미 만들어 놓은 것들을 우리가 뽑아서 써서 커스텀하는 느낌.

얘는 프레임워크보다 하위 개념이며, 우리가 코딩하다가 필요하다고 생각되는 라이브러리를 가져다가 쓰는 거라고 생각하면 될 것 같다.

내가 이제부터 계속 정리할 리액트가 여기에 해당된다.

 

 

이걸 왜 정리했느냐.

리액트 = 라이브러리

그렇기 때문에, 프레임워크와 달리 기타 기능들이 내장되어 있지 않기 때문에, 자연스럽게 여러 다른 라이브러리와 사용해야한다는 단점이 있을 수 있다. 하지만 역으로 생각하면 그만큼 여러 라이브러리를 내가 골라쓸 수 있는 장점이 있지 . ( 물론 내가 잘 가져와서 쓸 수 있는 능력이 된다면 큰 장점일듯..^^ )

 

 

 

리액트 설치방법 및 흐름은 공식문서 보고 정리한 내 블로그글을 소생시켜봤움.

https://korinkorin.tistory.com/44?category=974678 

2021.01.23 React 설치 및 시작 흐름

 

 

 

 

---

 

오늘은 약간 오랜만에 쓰는 글인만큼 조금 원론적인 어렵고 재미읍는 ^^ 이야기를 해보았는뎈ㅋㅋㅋㅋㅋ 이걸 정리한 이유는 내가 리액트를 왜써야하는지에 대한 근본적인 물음을 평소에 많이하기 때문에 결국 내가 보려고 쓰는 글 ㅎ 

오늘은 간단하게 여기서 끝!