Front-end/React.js

[React.js] React가 필요한 이유

잔디🌿 2023. 8. 9. 18:37

1.컴포넌트화 방식

중복코드를 수정해야 할 상황이 생겼을 때 하나하나 일일히 수정하기에는 어려움이 있다.

리액트는 재사용해야하는 요소들을 컴포넌트 방식으로 사용할 수 있다. 이를 컴포넌트화 방식이라고 한다.

이 방식을 사용하면 중복코드를 수정할 때 용이하다.

 

2.선언형 프로그래밍

+버튼을 누르면 화면의 숫자가 증가하고, -버튼을 누르면 감소하는 프로그램을 만든다고 하자.

 

명령형 프로그래밍 방식으로 만들었을 때는

 1.결과를 표시할 요소를 가져온다

 2.현재 결과값을 숫자형으로 바꾼다.

 3. +라면 더해서, -라면 빼서 다시 상수에 값을 넣는다.

 

선언형 프로그래밍 방식으로 만들면

 1. +를 누르면  ,result값에 +1을 하고 minus를 누르면 반대로 한다.

 

선언형 프로그래밍이 훨씬 간단하다. 리액트는 선언형 방식을 사용하기 때문에 간단하게 프로그래밍 할 수 있다.

 

3.virtual DOM

DOM은 문서 객체 모델이다. 사이트는 html을 해석해서 보여주는데, 이 html을 해석이 쉽게 트리 형태로 만들어둔다.

그리고 Dom은 이러한 과정을 거쳐 화면에 표시된다.

Dom을 계속 변경하게되면 브라우저는 위 과정을 계속 반복해야해서 불필요한 연산을 많이 해야한다.

가상의 돔에 한번에 업데이트해서 과다현상의 해결할 수 있다.