[React] React.js란 무엇일까? 기초부터 간단정리

들어가기 전에..

 

프레임워크?
-frame은 "틀" work은 "일하다"라는 뜻이다 이 뜻대로 틀대로 일하는 것이라고 볼 수 있다
즉 제공되는 일정한 요소와 툴, 규약을 가지고 무언가를 만드는 것이 프레임워크이다 
웹프레임워크는 웹프로그램을 개발하기 위해 사용되는 툴을 제공하는 프로그램이라고 보면 된다

Node.js 란?

Node를 React를 배우기 전에 알아둬야 하는 이유는 간단하다 React가 JS의 라이브러리이기 때문이다그렇기 때문에 JS가 어디서 어떻게 동작하는지를 알아야 한다


본래 JS는 웹브라우저에만 실행되어야 했다. 그러나 chorm의 JS의 실행하는 엔진인 V8엔진이 C++로 만들어졌기 때문에 톡 떼와서 브라우저가 아닌아무 곳에서나 사용가능하게 만들 수 있었다 이것이 Node이다.
즉 Node는 JS를 브라우저가 아닌 우리 컴퓨터에서 사용할 수 있도록 만드는 JS의 실행환경이자 React동작환경이라 보면 된다

 

React.js 란?

React는 JS의 웹프레임워크 중 하나로, node 기반의 JS 사용자 인터페이스(UI) 라이브러리이다.

 

---

그래서 React 왜 쓰는데?

1. 컴포넌트 기반이기 때문

만약 우리가 헤더와 푸터는 동일한 파일 100개를 가지고 있다 생각해 보자.
이때 헤더와 푸터에 무엇인가 수정사항이 생긴다면 우리는 이 100개의 파일의 헤더와 푸터 모두를 수정해야 하는 불상사가 생긴다
즉 산탄총 수술(한 개의 문제가 여러 개의 파일을 수정하게 함) 이 발생한다. 유지보수가 최- 악이다.
하지만 헤더와 푸터같이 공통부분들을 별도의 컴포넌트로 만들어 필요할 때만 불러 쓴다면 이를 막을 수 있다
수정사항이 생기더라도 컴포넌트 파일 하나만 수정해주면 되기 때문이다 재사용과 유지보수가 아주 좋아진다 :)

 

2. 선언형 프로그래밍이기 때문

명령형 프로그램( 절차를 차례대로 나열해야 함)
선언형 프로그램( 그냥 목적을 바로 말함)

예시로 사과를 바구니에 담는다 칠 때
명령형) 사과를 들어서 -> 바구니까지 간다음 -> 바구니 안에 놓는다
선언형) 사과를 바구니에 담아라

명령형은 코드에 문제가 발생하였을 때 어떠한 과정에서 문제가 생겼는지를 되짚어봐야 한다 이는 유지보수에 어려움이 있다
하지만 선언형은 원하는 목적을 선언하고 리액트에 전달하면 해결은 리액트가 처리한다. 개발과정에서도 최종 결과가
어떻게 되는지에만 신경 쓰면 되기 때문에 선언적 방식이 개발할 때 좀 더 편하다고 볼 수 있다 

 

3. virtual DOM 사용

DOM = Document Object Mode = 문서 객체 모델
즉 Html 코드를 트리 형태로 펼쳐낸 객체라고 보면 된다

어떠한 연산을 할때 잦은 update를 할시 필요이상의 연산으로 인해 성능저하가 온다
브라우저에서 발생하는 변화를 실시간으로 실제의 DOM으로 update 하지 않고
virtual DOM에 업데이트시켜놓는다 이땐 렌더링이 일어나지 않음으로 그만큼 연산이 줄여 성능 저하를 막는다

쉽게 말해 5번의 update 말고 5번의 변화를 한방에 모아서 1번 update 할 수 있도록 하는 게 virtual DOM이다.

 

---

..💬

React의 기초와 왜 사용하는지에 대해 알아봤다! 이러한 특징들을 잘 알고 이해하며 React를 사용해야겠다!