리액트(React)란?

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

◆ 리액트가 왜 나왔을까?
리액트가 없이도 HTML과 CSS를 이용하여 충분히 웹페이지를 만들 수 있다.
하지만, HTML과 CSS를 이용한 웹페이지는 동적인 데이터를 로딩하기에는 적합하지 않고,
관리해야하는 DOM이 많아질수록 DOM과 상태값 관리를 최소화하며 기능개발에 집중하기 위해서
프론트엔드 라이브러리 혹은 프레임워크가 개발되었다.

리액트는 페이스북에서 제공하는 프론트엔드 JavaScript 라이브러리이다.

◆ 리액트의 특징
리액트는 선언형 컴포넌트 기반이며, 단방향으로 흐르고 가상돔(Virtual DOM)을 이용한다.

1. 선언형

선언형이란 무엇을 할 것인지 정의(what)하는 것이다.
예를 들면, 네비로 길을 찾을 때 주소로 도착할 곳을 지정하는 것과 같다.

Example
출발 : 광주광역시 ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ
도착 : 서울특별시 ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ

기존의 DOM으로 웹페이지를 작성할 때에는 어떻게 보이는지에 따라 기술하였다면(명령형),
리액트는 무엇이 보여지면 되는지(선언형)를 기술하기 때문에 쉽게 코드를 작성할 수 있다.

2. 컴포넌트기반

리액트를 설명하는 것을 보다보면 컴포넌트라는 단어를 많이 보게 된다.
컴포넌트란 UI를 독립적이면서 재사용이 가능하도록 나눈 조각 혹은 요소라고 볼 수 있다.
UI를 하나의 큰 덩어리라고 생각한다면 컴포넌트들은 그 UI를 이루기 위한 조각들이라고 볼 수 있다.

클래스형 컴포넌트

■ class 키워드를 이용하여 클래스를 만듬(class App)
■ Component를 상속받는다(React.Component)
■ render() 메서드가 필요함
■ state와 lifeCycle 기능이 사용 가능

함수형 컴포넌트

■ state와 lifeCycle 기능이 사용 불가 -> Hook을 통해 해결이 가능

3. 단방향 데이터 흐름

리액트는 단방향 데이터 흐름으로 위에서 밑으로 데이터를 내려주며,
데이터를 전달할 때에는 부모에서 자식으로만 데이터 전달이 가능하다.

부모컴포넌트 -> 자식컴포넌트 : props
자식컴포넌트 -> 부모컴포넌트 : Events(state 끌어올리기)

4. Virtual DOM(가상돔)

리액트는 가상 돔과 실제 돔을 비교하여 변경사항이 있을 경우
전체를 렌더링하는 것이 아닌 변경된 부분만 렌더링하는 방식으로
효율성과 속도를 높였다.