[React] 1. React 시작하기(2) - React의 주요 특징

1. React 시작하기(2) 리액트의 주요 특징

 

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React의 주요 특징 ] 입니다. : ) 

실전으로 들어가기 앞서 리액트의 가장 큰 특징을 알아보고 넘어 가려 한다.

 

1. 리액트(React)란?

 

 - React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다.
 - 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다.
 - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다.

 

2. 리액트의 특징

1. 컴포넌트(Component)

 - 리액트는 컴포넌트 기반의 라이브러리이다.
 - 웹 페이지에서 컴포넌트는 화면을 이루는 작은 요소들이다.
 - 컴포넌트들은 여러 화면에서 사용될 수 있다. 즉 재사용성을 가지고 있다.
 - 컴포넌트의 종류는 클래스형과 함수형으로 나누어진다. 특징은 지금은 다음 정도만 알고 있자.
   1) 클래스형 : 프로퍼티, state와 함수 등을 포함 한다.
   2) 함수형 : state를 포함하지 않으며, 데이터를 받아 출력할 컴포넌트를 반환 한다.

 - 하기 1~5번을 각각 컴포넌트로 볼 수 있다.

이미지 출처) https://ko.reactjs.org/docs/thinking-in-react.html

 

2. Props and State

 - 단방향 데이터 흐름(one-way data flow) (or 단방향 바인딩(one-way binding))
리액트는 데이터의 흐름은 단방향이다.
 즉, 위에서 아래, 부모에서 자식, 한방향으로만 흐르며 거꾸로 부모의 데이터를 바꿔주기 위해서는 state를 이용해야 한다.

 

1) Props

 - 프로퍼티(properties)의 줄임말이다.
 - 부모요소에서 설정한다. 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 Props라고 한다.
 - 읽기 전용이다. 자식 컴포넌트에서 전달 받은 props를 변경이 불가능, props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

 

2) State
 - 컴포넌트의 상태를 나타내며 Props와 반대로 변할 수 있다. 즉 동적인 데이터를 다룰때 사용한다.
   (리스트에서 선택된 값, 체크박스에서 체크된 값 등)
 - 위에서 말한것과 같이 state는 클래스형 컴포넌트에서만 사용할 수 있다.
 - 각각의 state는 독립적이기 때문에 다른 컴포넌트의 직접적인 접근이 불가능 하지만, 
   상위 state는 state를 변경해주는 함수를 props로 받을 경우 state의 변경이 가능하다.

 

3. 가상 돔(Virtual DOM)

 - DOM 업데이트를 추상화 시켜놓은 것 이다.
 - 브라우저에서 html을 열게되면 DOM을 만들게 된다. html코드의 특정 부분이 변경되면 전체 DOM을 새롭게 만들게되어 매우 비효율 적이다.
   이를 개선하기위해 리액트는 가상 DOM을 만들어 진짜 DOM과 비교한다. 그리고 변경된 부분만 진짜 DOM에 반영하는 방식으로 작업을 수행한다.
 - in-memory에 존재해서 실제 렌더되지 않는다.
 - Vue나 React에서 사용한다.

 - 다음 이미지는 전체 UI를 다시 그려도 React DOM은 변경된 텍스트 노드만 업데이트하는 예시이다.

이미지출처) https://ko.reactjs.org/docs/rendering-elements.html

 

4. JSX

 - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법으로, 리액트에서 element를 제공해 준다.
 - 간단한 예시로 다음과 같은 형태의 형태를 띈다.

function App() {
return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

 

5. 뷰 담당역할 라이브러리

 - 리액트는 프레임워크가 아닌 라이브러리이며, 뷰만을 신경쓰는 라이브러리로 기타 기능은 직접 구현하여 사용해야 합니다.
 - 리액트에서는 라우팅을 리액트 라우터, Ajax 처리에는 axios 혹은 fetch, 상태 관리에는 리덕스(redux)나 MobX 등을 사용한다.

 

다음은 JSX에 대해 알아보면서 시작해볼까 한다.