[What Is React?]
공식 홈페이지 링크 주소 : https://reactjs.org/tutorial/tutorial.html#what-is-react
React는 사용자 인터페이스(UI)를 구축하기위한
선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
이 도구를 사용하면 "구성 요소(Component)"라는 작고 분리된 코드 조각으로
복잡한 UI를 작성할 수 있다. 기본 예제는 다음과 같다.
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
위와같이 재미있는 XML과 유사한 태그를 사용할 것이다.
컴포넌트를 사용하여 React에게 화면으로 보고 싶은 것을 알려준다.
데이터가 변경되면 React는 효율적으로 Component를 업데이트하고 다시 렌더링한다.
여기서 ShoppingList는 React Component 클래스 또는 React Component 유형이다.
Component는 props ("속성[properties]"의 약자)라는 매개 변수를 사용하고,
render 메서드를 통해 표시 할 뷰의 계층을 반환한다.
render 메서드는 화면에 표시 할 내용에 대한 설명을 반환한다.
React는 설명을 취해 결과를 표시한다.
특히, render는 React 요소를 반환하는데, 이것은 렌더링 할 내용에 대한 간단한 설명이다.
대부분의 React 개발자는 "JSX"라는 특수 구문을 사용하여 이러한 구조를보다 쉽게 작성한다.
<div /> 구문은 빌드시 React.createElement ('div')로 변환됩니다. 위의 예는 다음과 같다.
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
createElement ()에 대한 자세한 내용은 API 참조 문서에서 확인할 수 있지만
이 튜토리얼에서는 사용하지 않을 것이다. 대신에 JSX를 계속 사용할 것이다.
JSX는 JavaScript의 모든 기능을 제공한다.
JSX 내부의 중괄호 안에 JavaScript 표현식도 넣을 수 있다.
각 React 요소는 변수에 저장하거나 프로그램에서 전달할 수있는 JavaScript 객체이다.
위의 ShoppingList 구성 요소는,
<div /> 및 <li />와 같은 HTML에서 사용되는 기본 제공 DOM 구성 요소 만 렌더링한다.
그러나 사용자 정의 React 구성 요소도 작성하고 렌더링 할 수 있다.
예를 들어 ShoppingItem이라는 컴포넌트를 생성하여, 이 컴포넌트를 호출하여 사용할 수 있다.
<ShoppingItem />과 같이 작성하면 된다. 이렇게 하면, 쇼핑 항목을 참조 할 수 있다.
각 React 구성 요소는 캡슐화되어 독립적으로 작동 할 수 있다.
이를 통해 간단한 구성 요소를 조각조각 모아 하나의 복잡한 UI를 작성할 수 있게 된다.
