React를 강의로 처음 배웠을 때 조금 정리해두었던 내용인데 개념들을 몇 가지 더 추가해서 기록해보려한다. 어떤 기술을 배울 때 그 기술이 왜 생겼는지 알면, 조금 더 깊이 있게 이해하는데 도움이 된다는 강사님의 말씀을 듣고 정리해두었던 것이다.
1. 리액트의 탄생배경
요약해서 순서대로 나열해보면,
1. 라이브러리/프레임워크 없이 HTML, CSS, Javascript로 DOM을 조작하고 이벤트를 발생시키는 등 웹 개발이 가능했음
2. 웹이 발전하면서 웹 어플리케이션의 규모가 커지고, 관리해야 하는 Javscript 파일들이 많아지면서 코드가 복잡해짐
4. 이후 이를 관리하기 위한 Backbone.js / Angular.js 등의 프레임워크가 만들어지고, Javascript의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주는 등 업데이트 하는 작업을 간소화 해주는 방식으로 웹개발의 어려움을 해결
4. Single Page Application 개념이 등장
5. SPA를 적용한 프레임워크들이 있었지만, app이 커질수록 데이터의 흐름을 파악하거나 문제를 찾아 해결하는 것이 어려워짐
💥 이러한 문제들을 해결하기 위해 '지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축'을 목표로 2013년에 Facebook에서 React가 처음 등장!
2. 리액트란?
리액트는 UI를 만들기 위한 자바스크립트 라이브러리로 Single Page Application의 UI를 체계적으로 만들 수 있게 도와준다. SPA를 위한 다른 프레임워크에 비해 내장되어 있는 기능이 부족해 third-party 라이브러리(React-Router 등)를 함께 사용한다.
💡 리액트를 사용하는 이유
- JavaScript 문법을 그대로 활용하기 때문에 쉽게 접근 가능
- 페이스북의 지속적 관리로 생태계 활성화 및 퀄리티 유지
- 다른 프레임워크에 비해 컴포넌트가 단순하고 간단하게 정의
3. 리액트의 특징
1. 선언형
- 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 선언
- 직관적으로 각 상태에 따른 필요한 뷰를 만들고, 리액트가 필요한 부분만 효율적으로 렌더링
2. 컴포넌트 (Component) : UI 구성 단위로 코드 재사용성에 좋고, 각 컴포넌트와 컴포넌트를 사용한 해당 페이지의 유지보수가 용이해짐
3. JSX (JavaScript Syntax Extension) : 자바스크립트 확장 문법으로, 자바스크립트와 html을 합성해 놓은 것과 같은 것
4. 단방향 데이터 바인딩 : 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있음
💡 단방향 데이터 바인딩 vs 양방향 데이터 바인딩을 더 자세히
[Study] 단방향 vs 양방향 데이터 바인딩
이전에 리액트 관련 글을 작성하면서 단방향 데이터 방식이라는 것을 보면서 데이터 바인딩에서도 공부하고, 두 방식을 비교해두면 좋을 것 같았다. 1. 데이터 바인딩 (Data Binding) 데이터 바인딩
m-oonjm.tistory.com
5. 가상 돔 (Virtual DOM)
- 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용
- 리액트는 가상 돔을 사용하여 웹 어플리케이션의 성능을 극대화
💡 Virtual DOM을 더 자세히
[React] 가상 돔 (Virtual DOM)
리액트를 공부하면서 가상돔은 항상 나오는 말인데, 오늘은 이 가상돔에 대해 자세히 이해해보려고 한다. 1. 돔 (Document Object Model) DOM이란 HTML element들을 Tree 형태로 표현한 것인데 DOM Tree 안에는
m-oonjm.tistory.com