React가 무엇인지, 중요한 컨셉은 무엇인지 정리해보려고 한다.

What's React

• UI를 만들 수 있는 자바스크립트 라이브러리이다.
• Component 로 이루어진 UI 라이브러리 이다.
• 재사용 가능한 Component를 모아서 원하는 웹 어플리케이션을 만들 수 있다.
• 리액트는 가상돔(Virtual Dom)을 통해 UI를 빠르게 업데이트 한다 .

가상 돔(Virtual DOM)

• 변화가 많은 View를 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 , 실제 변화가 일어난 부분만 연산을해서 실제 DOM과 동기화 하는 프로그래밍 개념이다.

프레임워크 vs 라이브러리

프레임워크

• 정해진 골격 안에서 원하는 기능을 구현 해야한다.
• UI뿐만아니라 라우팅, 스테이트 등을 관리할 수 있는 방식 등 다양한 기능들이 한번에 묶여져서 제공되는 것.
• 많이 쓰이는 프론트엔드 웹어플리케이션 프레임워크로 Agular, Vue 가 있다.

라이브러리

• 프레임워크와 달리, ui를 담당하는 라이브러리 / 라우팅을 담당하는 라이브러리 처럼 구현하고자 하는 기능들이 작은 단위로 구현한 것.
• 따로 정해진 골격이 없기 때문에 원하는 구조의 골격을 만들어 나갈 수 있다.

Component란?

한 가지의 기능을 수행하는 ui의 단위

• React에서 제공하는 컴포넌트라는 클래스를 상속하여 사용한다.
• 컴포넌트 안에는 이 컴포넌트 안에 들어있는 데이터를 담고있는 State 객체와 사용자에게 UI를 표기하는 render 함수가 있다.
• State 의 상태가 변경되면 render 함수가 다시 호출되면서 UI를 업데이트 해준다.
• Component의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용이 용이하다.

Why React

• 페이스북에서 만들어진 이후로 강력한 커뮤니티가 형성 되어있고 때문에 문서화가 잘 되어 있다.
• 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료가 존재한다.

✅ React 의 중요한 컨셉

• React는 데이터가 변경 될 때마다 어플리케이션 전체를 다시 렌더링하여 UI를 자동으로 업데이트 해준다.
  → 데이터가 변경되는 부분에 대해서 한 번만 정리 해놓으면 React가 알아서 상태가 변경되면 render 함수를 다시 호출해주기 때문에 다시 해당하는 부분을 업데이트 해야되는 걱정을 하지 않아도 된다.

• React 내부에서 가상의 돔(Virtual DOM)트리를 메모리에 보관해 놓고 있기 때문에 업데이트가 일어날 때마다 이전의 트리와 비교해서 돔트리를 업데이트 하기때문에 성능을 보장할 수 있다.