react란

프로젝트를 진행하게 되면서 react를 이용하게 되었는데 해당 라이브러리를 사용하는 데 많은 어려움이 있었다. 보다 높은 품질의 프로젝트를 나중에 진행하게 됐을 때 다른 팀원들에게 피해를 주지 않기 위해서 리액트에 대해 간단히 공부한 내용을 작성해봤다.

• 자바스크립트 라이브러리의 하나로서 UI를 만들기 위해 사용됨

• 페이스북과 개별 개발자 및 기업 공동체에 의해 유지보수 되고 있음

• 주로 SPA나 모바일 App 개발에 사용됨 (App의 경우 React Native가 있음)

• 이를 이용해 동적인 웹 페이지를 쉽게 만들 수 있음

• 특징

    - 데이터와 템플릿을 결합해 화면을 생성하는 것
    - 장점: 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능, 데이터 흐름이 부모에서 자식이므로 코드 이해가 쉽고 서비스 규모가 커져도 데이터의 흐름 추적과 디버깅이 용이
    - 단점: 변화에 따른 페이지 업데이트 코드를 매번 작성해줘야 하므로 코드의 길이가 길어짐

**virtual DOM****JSX**

• - JavaScript를 확장한 문법으로 JavaScript에 XML을 추가, 확장한 문법 - 코드가 번들링 되는 과정에서 바벨을 사용하여 JavaScript 형태의 코드로 변환해준다 - 특징으로는 component에 여러 요소가 존재하면 반드시 부모 요소 하나로 감싸줘야함. 이는 virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM tree 구조로 이루어져야한다는 규칙이 있기 떄문
• - 이벤트 발생 떄마다 virtual DOM을 생성해 실제 DOM과 비교하여 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영하여 효율성과 속도를 개선할 수 있다고 함 - 단점으로는 높은 메모리 사용에 대한 문제가 있다
• 단방향 데이터 바인딩

DOM 간단하게 알아보기