목적
팀 프로젝트를 하는 도중 랜더링 과정에서 React의 JSX 방식을 마주하게 되었다 하지만 백엔드를 집중하던 나에게는 JSP나 Thymeleaf 정도 알고, React에 대해서는 개념정도만 알고 있었다
이를통해 백엔드 개발자라고 할지라도, 프론트엔드의 가장 트렌드 기술의 최소한의 구동원리는 알고 있어야 팀프로젝트의 View 랜더링 과정을 자연스럽게 작성할 수 있을 것이라고 판단해서 정리하게되었다.
React란?
웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
-
React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다.
-
싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.
즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있다.
React의 필요성?
react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되어진다.
React의 특징
React의 특징은 크게 다음과 같이 구분할 수 있다.
- Data Flow
- Component 기반 구조
- Virtual Dom
- Props and State
- JSX
1. Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 갖게된다.
Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어,
복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 한다.
2. Component 기반 구조
Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고,
이 컴포넌트를 조립해 화면을 구성한다.
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.
3. Virtual Dom
먼저, DOM을 이해할 필요가 있다 DOM이란 Document Object Model의 약자로, html 문서에 접근하기 위한 일종의 인터페이스라고 한다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
즉 html의 요소들의 구조화된 표현이라고 생각하면된다.
DOM의 종류는 W3C 표준으로 세가지 모델이 구분된다.
- Core DOM : 모든 문서 타입을 위한 DOM 모델
- HTML DOM : HTML 문서를 위한 DOM 모델
- XML DOM : XML 문서를 위한 DOM 모델
이글에서 더 자세한 내용은 생략하도록 하겠다.
html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.
4. Props and State
-
Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
즉, 읽기 전용 데이터라고 생각하면 된다.
또한 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다. -
State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.
5. JSX
JSX란? React에서 본질적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사 분리를 한다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.
또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.
JSX의 표현식
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);주의점
JSX는 HTML보다는 Javascript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름대신 camelCase 프로퍼티 명명 규칙을 사용한다
ex) JSX에서 class는 className가 되고, tabindexsms tabIndex가 된다.
JSX의 결론 : 하나의 파일에 자바스크립트와 html을 동시에 작성하여 편리성을 높이고,
자바스크립트에서 html을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다는 장점이 있다.
References (참고 자료)
