React를 알아보자

서론

학기 중에 약 3개의 리액트를 이용한 프로젝트를 진행하면서 기초의 중요성에 대해서 깊이 깨달았다.. 특히나 Hook을 사용할 때, 생명 주기 부분에서 너무 빈약했고 내가 직접 프로젝트를 한다기보다 남들이 만들어놓은걸 짜집기 했다는 느낌이 너무 강했다. 그래서 학기 중엔 깊게 다루지 못하는 리액트의 기초에 대해서 정리해보고 차근차근 원리를 알아가는 시간을 가지려고 한다.

React가 뭔데?

리액트(React, React.js, ReactJS)는
자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

리액트는 페이스북 개발자가 만들었다고 알려져있고, 현재는 개별 개발자들과 기업들에 의해서 유지보수 및 업데이트 되고있다.

리액트는 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
출처: 위키백과

왜 쓰는데?

• 웹 앱(Web-App)을 제작하기 편하고 모바일 앱으로 발행하기 쉬워진다.
• 웹을 앱처럼 뛰어난 UX제작이 가능해진다.
• -> 그냥 웹사이트보다 비지니스적으로 강하다.

1. SPA(Single Page Application)을 만들 수 있다.

그런데 SPA가 뭘까? 요즘 SNS를 포함한 많은 사이트들이 SPA로 개발되고 있고 나도 모르게 사용하고 있었는데 SPA의 정의에 대해서 모르는 것 같아 간략하게 정리하고 넘어가보자.
'Single Page Application' 즉, 어떤 웹 사이트의 전체 하나의 페이지를 동적으로 화면을 바꿔가면서 표현하는 것이다. 즉 데이터가 바뀌면 바뀐 부분(최소한의 부분)만 변경이 일어난다.

2. Component로 재사용성이 증가한다.

다음 장에서 설명하겠지만 React는 컴포넌트들로 이루어져있다. 기능과 화면에 따라 컴포넌트를 분류를 하는데 이 컴포넌트를 다른 곳에도 사용할 수 있어 재사용성이 증가하고 전체적인 코드가 짧아진다.

3. 앱 개발도 가능하다.

React문법으로 react-native를 이용하여 앱개발을 할 수 있다.

---

아까 밑에 더 읽어보면 알겠지만 react는 자바스크립트 프레임워크들 중에 하나이다. Vue나 Angular등이 더 있는데, 특별히 리액트의 장점은 잘 모르겠다.(내가 아직 다른 것들을 직접 써보지 않고 다른 강의나 영상을 참고해서 그런걸지도 모르겠다.) 다른것들과 차별화된 리액트의 특별한 장점이라고 한다면 **인지도가 높고, 사용량이 많다**.는 것이 전부다. 우리는 취미나 즐거움을 위해서 코딩을 하는 것이 아니라 대부분 취업을 위해서 공부를 하는 것이니 사용량은 상당히 중요하니까(^^7)

JS 프레임워크

리액트는 js프레임워크(framework)중에 하나이다.
js 프레임워크의 종류에는 React이외에도 Vue.js, Angular 등이 있다.

Framework란?
어떤 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조. 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다.
여러 기능을 가진 클래스와 라이브러리가 "특정 결과물을 구현"하고자 합쳐진 형태.

React 기본 원리

어떤 데이터가 변할 때마다 기존 뷰를 날려버리고, 처음부터 재렌더링하는 방식의 아이디어를 기반으로 한다.

리액트는 데이터가 변할 때마다 변할 때마다 변하는 구간의 뷰를 날려버리고 그 부분만 재렌더링 하는 방식을 사용한다.

이렇게 되면,

• 애플리케이션의 구조가 간단해짐
• 코드가 줄어듦.

위와같은 장점이 있다.
뷰가 어떻게 생길지를 선언하고, 데이터가 바뀌면 기존에 쓰던 것은 버리고 특정 규칙에 따라 새로 렌더링하면 되기 때문이다.

하지만,

• CPU 사용량이 증가함.
• DOM은 느려지고, 메모리도 많이 사용함.
• 끊김 현상이 발생할 수 있음.

위와같은 단점이 발생할 수 있었다.
하지만 이러한 단점을 고려(최대한 성능을 아끼고, 편안한 UX를 제공)하여 개발한 것이 리액트이다.

결론

사실 이 내용들에 대해서 정리를 할까말까 고민을 되게 많이 했는데, 적어도 내가 쓰는 이 프로그램이 뭔지, 어떤 장점 때문에 쓰는지는 알아야하지 않을까해서 가볍게 정리해보았다.
어느정도 이런 프레임워크를 다룰 줄 알면 생자바스크립트를 잘 하는 것이 도움이 많이 된다고하니, 여유가 될 때 기초를 모두 다져놓으면 좋을 것 같다.
다음 글부터는 실제 코딩할 때 궁금했었던 점들을 기반으로 컴포넌트(Component)부터 정리를 시작할 예정이다.