[React] 리액트란? 리액트를 사용하는 이유? (vs. Vanilla js)

1. Javascript만을 사용한 코드는?

자바스크립트는 명령형 접근방식(imperative approach)이기 때문에 모든 단계를 설명하는 것이 중요하다.

예를 들면 화면에 특정한 페이지를 띄우는 방식 등에서 일련의 액션들을 단계별로 설명해야한다.

-> 모든 단계를 명시하는 과정에서 한계가 나타날 수 있고 세부사항들을 신경써야한다. 이는 되풀이되고 반복적인 액션들을 작업하게 될 수 있다.

 

 

2. 리액트(React.js)란?

 

• 리액트는 client-side 자바스크립트 라이브러리이며 모던, 반응형 유저 인터페이스관리에 용이하다.
• Declarative and component-focused approach

3. React.js의 장점은?

리액트를 사용하면 같은 방식으로 동작하지만 훨씬 더 간결한 코드로 작업할 수 있다는 장점이 있다.

겉보기에는 더 많은 폴더와 파일들 때문에 복잡해 보이지만, 이 파 일들은 각각 커스텀 JSX element를 가질 수 있기 때문에 하나의 프로젝트가 작은 블럭들로 나누어진 것이다.

이 component 라고 불리는 각각의 요소들은 조건부로 렌더링된다. 이것의 장점은 각각의 element 들이 명확한 task 를 가지고 있다는 것이며 이에 따라 유지보수와 관리가 용이하게 유지된다.

 

또한 리액트로는 Single Page Applications 즉 SPAs를 구축할 수 있다.

각각의 component 가 html 요소들을 정의하고 있기 때문에, SPA에서 서버는 하나의 HTML page 만 보내고, 리액트가 나머지 UI 들을 넘겨받고 제어한다.

 

컴포넌트가 제어 될 경우(ex. 마이페이지를 선택한 경우) 사용자가 보기에는 마치 페이지를 전환한 것 처럼 보이지만, 화면에 보이는 것들을 변경하기 위해 자바스크립트 라이브러리인 리액트를 사용한 것이다.

 

 

 

4. 바닐라 자바스크립트 vs 리액트

⇒ 화면의 요소들과 액션을 정의하기 위해 리액트 라이브러리를 사용하면 바닐라 자바스크립트 코드보다 higher level 로 작업할 수 있게 해준다. 복잡한 사용자 인터페이스를 구성할지라도 명확한 task를 가진 각각의 컴포넌트를 조합해 사용한다면 훨씬 더 효율적인 코드가 된다.

 

 

 

 

5. 리액트의 방향성?

웹페이지를 구성한다는 것은 곧 화면에 나타내고 싶은 것들을 정의한다는 것이고, 이는 React.js 라고 불리는 자바스크립트 라이브러리가 직관적으로 이러한 것을 구성하는데 효율적으로 기여한다.

따라서 리액트는 프론트엔드 개발자 혹은 풀스택 개발자들의 최종목표를 위한 도구라고 볼 수 있다.

 

https://daystudy.tistory.com/2273

'자바스크립트 현황 2022' 보고서 | 리액트·엥귤러 지고, 스벨트·솔리드 뜬다