React를 사용하는 이유와 컴포넌트

React를 사용하는 이유와 컴포넌트

React란?

React.js는 클라이언트 사이드의 자바스크립트 라이브러리이다.

전통적인 웹사이트에서는, 예를 들어 우리가 링크나 버튼을 클릭하면 그 요청이 서버에 전송되고 새로운 html페이지가 브라우저로 보내져 화면에 보여졌다.

그래서 전통적으로 웹사이트들은 약간 무겁고 불편하게 느껴졌다.

브라우저에서 자바스크립트는 DOM을 조작할 수 있는데 이를 통해 html의 요소들이 화면에 렌더링된다.

우리는 새로운 html 페이지를 불러오지 않고도 이것을 자바스크립트로 조작할 수 있고 사용자들이 보는 것들을 변경할 수 있다.

이러한 방식을 SPA(Single Page Application)라고 하며 SPA는 화면 전환도 거의 동시에 이루어지고 여기서 뭔가 로딩되느라 기다리지 않아도 된다.

자바스크립트에 추가로 리액트가 필요한 이유

그렇다면 자바스크립트만으로 SPA를 구현할 수 있는데 리액트를 사용하는 이유는 무엇일까?

자바스크립트로 작업할 때는 모든 단계를 일일이 작성해야 한다.

예를 들면 요소를 생성하고 싶고 거기에 내용을 구성하고 싶고 클래스를 추가하고 싶고 클릭 리스너를 추가하고 싶다면 모든 단계들이 전부 설명되어야 한다.

개발자로서 우리는 이런 모든 핵심적인 세부 사항들을 신경써야 하며 저수준의 코드를 실행해야 한다.

그래서 결국은 계속해서 되풀이되는 반복적인 작업을 하느라 시간을 낭비하게 된다.

리액트는 응용프로그램을 작은 빌딩 블록과 작은 컴포넌트들로 분할하는 것에 관한 것으로 모든 빌딩 블록, 모든 컴포넌트들은 명확한 태스크들을 갖고 있으며 코드는 유지 보수와 관리가 용이하도록 유지된다.

리액트 개발자로서, 우리는 고수준에서 작업하는데 리액트와 연계해서 복잡한 사용자 인터페이스 작업을 더 쉽게 구축할 수 있도록 한다.

구성 요소들을 생성하고 텍스트 컨텐츠를 설정하는 이런 모든 저수준의 지침들은 리액트를 사용할 때 우리가 작성하는 지침이 아니고 리액트 라이브러리에 의해 작성되거나 정의된다.

고수준의 구문을 제공해서 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성한다.

우리는 사용자 지정 html 요소를 생성하고 리액트가 나머지를 수행한다.

컴포넌트

컴포넌트는 스타일을 만드는 Html코드와 CSS코드 그리고 로직을 위한 자바스크립트의 결합이다.

모든 사용자 인터페이스들은 결국 컴포넌트로 구성되기 때문에 리액트의 중요한 개념이다.

기존의 웹 프레임워크는 MVC 방식으로 코드를 관리하였으나 MVC 각 요소는 의존성이 높고 재활용이 어렵다.

웹 사이트의 화면은 각 요소가 비슷하고 반복적이기 때문에 MVC의 뷰를 독립적으로 구성하여 재사용성을 높인다.

이런 각각의 컴포넌트를 구축하고 리액트에게 최종 사용자 인터페이스에서 어떻게 구성할 것인지 명령할 수 있다.

리액트가 이런 컴포넌트의 개념을 도입한 것은 재사용 가능하다는 점뿐만 아니라 우려사항들을 분리할 수 있도록 해주기 때문이다.

모든 html코드와 모든 자바스크립트 로직 그리고 전체 사용자 인터페이스가 들어있는 커다란 파일 대신 각각의 컴포넌트는 하나의 명확한 역할에 대해서만 집중할 수 있다.

리액트에서는 컴포넌트와 이 컴포넌트들을 잘 결합해서 구축하는 것이 중요하다.

이런 컴포넌트들을 만들기 위해서 리액트는 선언적 접근 방식을 사용한다.

그래서 자바스크립트에서 하는 것처럼 직접 구체적인 DOM을 업데이트하는 지침들을 작성할 필요가 없다.

대신, 리액트나 리액트 컴포넌트로 작업할 때는 최종 상태와 어떤 상황에서 어떤 상태가 사용되어야 하는지 정의하면 된다.