React의 기초

리액트(React)란?

리액트란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

현재 가장 핫한 라이브러리 중 하나로, 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

즉, 현재 많이 활용되고 있는 웹/앱의 view를 개발할 수 있도록 하는 인기있는 라이브러리!

 

리액트의 필요성

React를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있다

그러나 react를 이용해 사용자와 상호작용 할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되고 있다.

 

프로젝트가 사용자와의 인터랙션이 별로 없다면 사실상 프론트엔드 라이브러리는 필요하지 않습다만,

프로젝트 규모가 커지고 정말 다양한 유저 인터페이스와 인터렉션을 제공하게 된다면 라이브러리를 선택하는 것이 좋다!

 

리액트의 대표적인 특징

1. JSX 문법

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 준다.

XML과 매우 비슷하게 생겼음!

const element = <h1>Hello, world!</h1>;

 

2. Component 기반

react는 컴포넌트 기반 라이브러리이다!  컴포넌트 기반이라 함은 기존의 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할 해서 코드의 재사용성과 유지보수성을 증가시켜 준다. 

 

쉽게 말하여 아주 긴 HTML 코드를 사용할 때, 그 코드의 일부를 수정해야 한다고 할 때 그 부분을 찾는 것부터 시작해 수정하는 부분이 아닌 다른 부분까지 수정되면 도리어 문제를 키우게 될 수도 있습니다. 이때 REACT로 개발을 하면 HTML 코드를 부분 부분 파일로 담아 어떤 부분을 수정해야 한다고 하면 그 부분의 파일만 수정하면 됩니다! 

 

 

3. Virtual DOM

DOM이란? - Document Object Model, 즉 문서 객체 모델이다. 우리가 사용하는 html 단위 하나하나를 객체로 생각한 모델이라 생각하면 될 것 같다.

 

Virtual DOM (VDOM) -  UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다. ->  재조정

재조정 (Reconciliation) – React

 

이 접근방식이 React의 선언적 API를 가능하게 한다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 한다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화함

 

 

 

 

 

 

해당 블로그를 참고하여 공부한 내용입니다 :)

https://berkbach.com/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2

기초부터 배우는 React — Part 1