리액트(React) 기초

Woo Yong·2023년 2월 19일

목록 보기

1/2

1. React

리액트(React)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 즉, 현재 현업에서 인기있는 웹/앱의 View를 개발할 수 있도록하는 라이브러리이다.

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

추가적으로 한국인이 영어와 아랍어를 공부할 때, 영어를 공부하는 것이 훨씬 수월할 것이다. 왜냐하면 영어는 관련자료가 다양하고 많기 때문이다. 이처럼 현재 프론트엔드 시장에서는 리액트가 많은 부분을 점유하고있으며 교육자료도 다양하다.

2. React의 필요성

웹 사이트를 구현한다고 할 경우 HTML, CSS, JavaScript만을 사용하여 구현이 가능하다. 하지만 HTML, CSS, JavaScript만을 이용한다면 중복 코드가 생기고 코드가 길어지며 유지보수가 힘들다.

리액트를 이용한다면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 구현이 가능하기 때문이다.

3. React의 특징

리액트는 선언형이다.

리액트는 컴포넌트 기반 으로 재사용성이 뛰어나다.

리액트는 Virtual DOM(가상돔)으로 가볍다.

리액트 컴포넌트는 state와 props을 가진다.

리액트는 단방향 데이터 바인딩 방식이다.

4. 선언형

리액트 사용 이전에는 DOM을 직접적으로 조작하는 방식이었다.
이처럼 자신이 직접 DOM을 조작하는 방식을 명령형 프로그래밍이라고한다.
아래 사진과 같이 명령형은 프로그램의 제어의 흐름과 같은 방법을 제시의 초점이 맞추어져있다는 것이다.

하지만 선언형은 제어의 흐름보다는 원하는 목적을 중요시 여기기 때문에 코드가 간결해지고, 무엇을 보여줄지에 집중할 수 있고, 결과 예측이 쉽다.

아래 사진은 선언형 프로그래밍 코드이다.

5. 컴포넌트 및 재사용성

컴포넌트(Component)는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다.

따라서 컴포넌트(Component)라는 개념을 통하여 HTML, CSS를 간략하게 <Component />로 사용이 가능하다. 즉, 웹에서 사용되는 요소들을 컴포넌트화하여 기존의 UI를 다른 화면, 프로젝트에서 재사용을 가능하게 해준다.

6. Virtual DOM

DOM(Document Object Model)은 문서 객체 모델이다.
문서객체라는 것은 html, head, body와 같은 태그들을 JavaScript가 이용할 수 있는 객체를 말한다.

따라서 웹 사이트를 구성하는 태그들을 JavaScropt가 이용할 수 있게 트리구조로 만든 객체 모델이다.

Virtual DOM은 실제 DOM에 접근하여 조작하는 대신, 이것을 자바스크립트 객체를 이용해 사용하는 것이다.

Virtual DOM 사용이유

주변에서 볼 수 있는 웹 어플리케이션은 엄청 다양한 요소들로 구성되어있습니다. 그런데 이러한 큰 규모의 웹 어플리케이션에서 직접적으로 DOM을 조작한다면 성능 이슈가 발생하게 됩니다. 즉, 렌더링이 일어나는 과정에서 시간이 허비되어 속도가 느려질 수 있습니다.

그러므로 요소 변경시 가상돔에 리렌더링하여 바뀐부분만 실제 DOMdp 적용하여 성능적인 부분을 해결할 수 있습니다.

7. state와 props

props와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고있고, 차이점으로는 props는 (매개변수와 같이) 컴포넌트에 전달되고, state는 (지역변수 처럼) 컴포넌트 안에서 관리됩니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다.

읽기 전용 (변경 불가)

Component에 전달

state는 컴포넌트 내부에서 값을 저장하거나 변경할 수 있는 데이터

동적인 데이터 (변경 가능)

Component 안에서 관리

8. 단방향 데이터 바인딩

데이터 바인딩은 두 데이터 또는 소스를 모두 일치시키는 기법이다. 즉, 화면에 보이는 데이터, 브라우저 메모리에 있는 데이터를 일치시킨다는 것이다.

따라서 React에서는 데이터가 단일방향으로 흐르기 때문에 데이터 추적 및 디버깅이 쉽지만, 데이터 변화에 따라서 화면 업데이트 코드를 매번 작성해야한다는 단점을 가진다.