오직view만 담당하는 자바스크립트 라이브러리
자바스크립트 레플릿을 끝내고 이어서 바로 시작된 리액트,
자바스크립트의 문법도 익숙치 않은채
리액트를 만났다..
페이스북에서 개발한 자바스크립트 라이브러리 '리액트'
어떤 이유때문에 라이브러리 생테계에서 입지를 다지고있는지 알아보도록할까?😄
mvc패턴 vs mv 패턴이 아닌 오직 V
리액트는 말그대로 오직 view 만 신경쓰는 라이브러리이다
사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다. 리액트에서는
어떻게 렌더링하길래 데이터가 변할때마다 새롭게 리렌더링 하면서 성능을 아끼고
효율적으로 작동하게 하는걸까?
- 초기렌더링 (DOM)에 주입
이때 render 함수가 반환하는결과를 곧바로 DOM에 반영하지않고
이전 render 함수가 만든 컴포넌트 정보를 비교
차이를 알아내고 DOM 트리를 업데이트
그래서 리액트에서는 가상의 DOM Virtual DOM을 사용한다
Vritual DOM
실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구상하여 사용한다.
1.데이터를 업데이트하면 전체 UI 를 Virtual DOM에 리렌더링 한다
-
이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다
-
바뀐 부분만 실제 DOM에 적용한다.
-출처 https://programmingwithmosh.com/react/react-virtual-dom-explained/
지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기위해
만들어진 리액트 얼마나 효율적인지 더 알아보자
component 개념
리액트 특징으로는 파일을 하나하나 쪼개서 관리할수있다는것인데
하나하나의 기능을 쪼개어 하나의 Component로 쪼개어서 관리하게 한다
대규모 어플리케이션에서는 무수히 많은 페이지가 필요하기때문에
재활용성, 최적화, 등 많은 부분들을 감당해야하기때문에 어떻게 상태를 관리할것인가?
에 대해서 많은 얘기들이 나온다 .
❗️ 문법에 대해서는, 공식문서가 있으니 생략한다!
하나의 component에서는 state라는 객체로 값을 저장하고 참조하여
기능을 만드는데 참조하여 사용할떄는 this.setState라는 메소드를 써야한다
setState가 작동될때는 실행함과동시 리렌더링이 된다.
때문에 비동기상황에 걸리게되는데 실행후 반박자 느린 상황이 발생한다.
렌더가 되기전에 함수를 선언하고 렌더 이후 선언된 함수를 참조하게 된다
처음에는 문법에 익숙하지 않을테니 충분히 따라해보고 시작하자!
props , state
리액트에서 핵심개념은 이 두가지다
porps, state
props
props는 부모 컴포넌트에서 자식컴포넌로 값을 보낼때 통로 역할을 하게 되는데
이런식의 내용들을 자식컴포넌드로 보내 맵함수를 효율적으로 다룬다거나 따로 관리를 하는 파일을 만든다거나
기능을 하는 페이지를 따로 뺴놓고 필요할떄마다 사용한다거나 효율이 높아지게된다.
state
state는 상태값을 저장하게 하는데
객체안에 내용을 담아 함수식의 값으로 참조할수있다
이렇게 JSON형태로도 보낼수있고 다양한 기능을 구현할때 사용한다
마무리 하며..
LifeCycle은 아직 공부를 제대로 하지못해서
기술할순없지만
한가지 확실한건, 리액트는 여러 활용도에서 뛰어난 라이브러리인것같다
자바스크립트에서 제어하기 힘든 부분도 쉽게 제어가능하며
대규모 어플리케이션 상황에서
충돌나지않고 효율적으로 프로그래밍할수있을것같다.
프로젝트기간중 많은 문제에 직면하고있지만,
해결하는 재미에 기쁘다^^
