본격적인 프로젝트를 시작하기 전에 리액트에 대한 개념이 부족하다고 느껴 스터디 첫번째 시간으로 개념을 정리해보도록 하겠다.
- React
자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. MVC, MVW 등인 프레임워크와 달리,
오직 V(View)만 신경 쓰는 라이브러리이다.
- JSX (Javascript XML)
- Javascript에 XML를 추가한 확장된 문법이다.
- UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다.
리액트는 JSX 사용이 필수가 아니지만 대부분의 사람들은 Javascipt 코드 안에서 UI관련 작업을 할때 시각적으로
더 도움이 된다고 생각하여 많이 사용한다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.ex)
const name = 'Park';
const element = <h1>Hello, {name}</h1>;
//JSX 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다.
//JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.- babel
- Javascript 컴파일러이다.
- Babel을 이용하면 ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼
소스 코드 내의 문법의 형태를 변경할 수 있다. - Element
- 리액트의 가장 작은 단위이다.
- 엘리먼트는 화면에 표시할 내용을 기술한다.
- 엘리먼트와 컴포넌트를 혼동할 수 있다. 엘리먼트는 컴포넌트의 "구성요소"이다.- Component 컴포넌트
- 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 한다.
- 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른개념이다.
- 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을
정의한다.
- 컴포넌트를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것이다.
- 컴포넌트의 이름은 항상 대문자로 시작한다. 소문자로 시작하는 것은 DOM태그로 처리한다.
- 버튼, 폼, 다이얼로그, 화면등의 모든것들이 컴포넌트로 표현된다.- 함수 컴포넌트 예시
function Test(props){
return <h1>Hello, {props.name}</h1>;
} //props는 속성을 나타내는 데이터이다.- 클래스 컴포넌트 예시
class Test extends React.Component {
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}- props (프로퍼티)
- properties의 줄임말이다.
- 상위컴포넌트가 하위컴포넌트에 값을 전달할때 사용한다.
- 프로퍼티는 수정할 수 없다는 특징이 있다.- Rendering 렌더링
- 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 한다.
- 리액트 라이브러리는 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다. 리액트 라이브러리가 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있는 이유를 알려면 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다.
- 초기 렌더링
어떤 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 리액트에서는 render함수가 있다.
render() {...}render함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.
이 함수는 html형식의 문자열을 반환하는게 아니라 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다. 이때 render함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다.
- 조화 과정
리액트 라이브러리에서 중요한 부분인 업데이트를 어떻게 진행하는지 알아보자.
리액트에서 뷰를 업데이트할때는 업데이트 과정이라고 하기보다는 조화 과정을 거친다라고 하는것이 더 정확한 표현이다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 뷰가 변형되는 것처럼 보이지만 사실은 새로운 요소로 갈아 끼우기 때문이다.
이 작업또한 render함수가 한다. 컴포넌트는 데이터를 업데이트했을 때 새로운 데이터를 가지고 render함수를 또 다시 호출한다. 그러면 그 데이터를 지닌 뷰를 생성해낸다.
이때 render함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교한다.
자바스크립트를 사용하여 두가지 뷰를 최소한의 연산으로 비교한 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트하는 것이다.
결국 방식 자체는 루트노드부터 시작하여 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만 사실 최적의 자원을 사용하여 이를 수행하는 것이다.
- Virtual Dom
- 리액트의 주요 특징 중 하나이다.
- Virtual Dom을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
마치 실제 DOM의 가벼운 사본과 비슷하다.
- DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주하게 되고, 그만큼 자원이 많이 소모하게되는 문제를 해결하기
위한 기술이다.
리액트에서 데이터가 변하여 웹브라우저에 실제 DOM을 업데이트할 때는 다음 세가지 절차를 밟는다.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
참고 자료 : 리액트르 다루는 기술
