[React] 리액트 개요

[React] 리액트 개요

React란?

- 페이스북에서 제공해주는 Front-end 프레임워크이다.

- Javascript / Typescript 기반의 대표적인 Single Page Application 프레임워크이다.

- JS / TS 기반의 싱글 페이지 프레임워크인 vue.js, angular와 나란히 비교된다.

- 기존 SPA처럼 컴포넌트 기반의 개발을 강제하는 프레임워크이다.

(컴포넌트에 데이터를 전달해주면, 컴포넌트를 개발한 설계한대로 UI가 생성되어, 사용자화면에 표시됨)

React의 장점

- 기존 바닐라JS와 HTML과 CSS 만으로도 충분히 웹페이지를 만들 수 있으나, React를 통해 개발하면 사용자의 Action으로 인해 지속적으로 변경되는 동적인 데이터(변경되는 데이터)를 UI에 반영(렌더링)되도록 하는 작업에 매우 쉽게 구현할 수 있다.

React의 핵심 개념

1. 컴포넌트

- 컴포넌트는 개념상 Template과 Style과 Logic으로 구성되어 있고, 데이터에 따른 UI를 표시(렌더링)해주는 하나의 블록이라고 생각하면 된다.

- 컴포넌트는 여러개의 하위 컴포넌트로 구성될 수 있다.

- 하위 컴포넌트부터 하나씩 설계하면서 쌓아 올리면, 하나의 UI가 만들어 진다.

- 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있어, 똑같은 코드를 복사 붙여넣기할 필요가 없다.

- React의 컴포넌트는 해당 컴포넌트가 state값(상태값)을 담을 수 있느냐에 따라, 클래스형과 함수형으로 나뉘어진다.

1-1. 클래스형 컴포넌트 : "state값을 저장하는 것이 필요한 경우"

- 말그대로 클래스 형식의 UI 컴포넌트는 컴포넌트 내부에 데이터를 임시적으로 저장할 수 있고, 필요할 때마다 변경이 가능한 속성을 가지고 있다.

- 데이터는 리스트 아이템이 될 수도 있고, 여러개의 단순 변수값이 될 수도 있다.

- 클래스가 멤버변수를 선언하고 값을 임시로 저장할 수 있듯이 클래스형 컴포넌트는 상태값을 저장해야되는 경우에 사용된다.

- "상태값을 가질 수 있는(stateful)" UI 컴포넌트를 의미한다.

1-2. 함수형 컴포넌트 : "state값을 저장할 필요없는 경우"

- 말그대로 함수 형식의 UI 컴포넌트는 입력받은 데이터에 따른 정해진 결과 UI를 렌더링해준다.

- 함수가 같은 입력 X 에 대해서 항상 같은 결과 Y를 반환해야 하는 것처럼, 상태값 저장 없이 Input 데이터에 대한 결과 UI를 표시하는 것이 필요한 경우에 사용된다.

- "상태값이 없는(stateless)" UI 컴포넌트를 의미한다.

2. One Wat Data flow

- React는 여러개의 컴포넌트 결합으로, 하나의 어플리케이션을 만들어 낸다.

- 개별 컴포넌트의 핵심적인 기능은 데이터를 전달받아서, 개발자가 설계한대로 UI를 렌더링해주는 것이다.

- 이 때, 상위 컴포넌트에서, 하위 컴포넌트로의 데이터의 흐름이 발생하게 되는데 React는 원칙적으로 데이터 흐름이 한 방향으로만 흐르도록 강제하고 있다.

- 함수 또한 데이터가 Input -> Output으로 단방향적으로 흐르는 것과 동일한 개념이다.

- 함수가 함수를 호출한 쪽의 데이터 혹은 변수값을 변경할 수 있는 방법은 없지만, 호출한 쪽에서 광역변수를 선언해 두었을 경우, 함수 상에서 광역 변수의 값은 변경시킬 수 있게 된다.

- 컴포넌트 또한 기본적으로는 특정 데이터 [X]에 따른 결과물 UI [Y]를 렌더링해주는 함수적 속성을 띄기 때문에, React는 아래와 같은 데이터 흐름을 강제한 것으로 생각되어진다.

-> 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달 (가능)

-> 하위 컴포넌트에서 상위컴포넌트로 데이터를 전달 (불가능)

- 그러나, 개발하다보면 분명 하위컴포넌트의 데이터를 상위 컴포넌트로 올려서 전달해줘야하는 경우가 꼭 생긴다. 이와 같은 경우에는 상위 컴포넌트 내부에 있는 state값을 변경시켜주는 방법으로, 데이터를 전달해주는 효과를 줄 수 있다.

3. Props 과 State

- Props과 State 모두 개별 컴포넌트가 가지는 구성요소이다.

- 컴포넌트 기반의 SPA 프레임워크에서는 컴포넌트 간 데이터 전달을 설명할 때, 대부분 등장하는 개념이다.

3-1. Props

- Props이란 개념적으로 "부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 값"을 의미한다.

- 컴포넌트 구현시, Props으로 정의해놓은 데이터 항목은 상위 컴포넌트에서 전달받을 데이터 값 [상위 컴포넌트의 데이터 변수 자체를 가리키는 것이 아님] 을 의미한다.

- 함수에서 Input으로 변수가 아닌 변수 값을 전달받아서 변수 값에 해당하는 Output을 반환하듯이 하위 컴포넌트 또한 상위 컴포넌트로부터 전달받은 Props 값으로 단순히 미리 정의된 렌더링 작업을 수행한다.

- Props에 해당하는 데이터 항목은 상수[읽기 전용]적 속성을 가진다.

- 상위 컴포넌트의 변수값을 바꾸기 위해, 하위 컴포넌트의 Props 속성 값을 변경해도, 상위 컴포넌트의 데이터에는 전혀 영향을 주지 않는다. Props의 개념을 오해하고 있는 경우이다.

3-2. State

- State란 개념적으로 "상태값을 동적인 데이터"를

React를 왜쓰는가?

- 기존 JS 기반의 jQuery처럼

from http://sddev.tistory.com/185 by ccl(A) rewrite - 2021-06-30 15:27:14