자바스크립트 + 리액트 디자인 패턴

278

자바스크립트 + 리액트 디자인 패턴

웹팩

webpack

리액트에서 자주 쓰이는 자바스크립트 모듈 번들러입니다.

SPA

Single

-

page

application

페이지 새로고침 없이 내용만 바꾸면서 동작하는 웹 애플리케이션입니다.

12.1.2

리액트의 기본 개념

리액트의 디자인 패턴에 대해 알아보기 전에 리액트에서 사용되는 몇 가지 기본적인 개념들

을 이해하고 넘어가면 도움이 될 것입니다.

JSX

JSX

는

XML

과 유사한 구문을 사용하여

HTML

을 자바스크립트에서 사용할 수 있게 해

주는 확장 문법입니다.

JSX

는 구현 방식에 따라 특정한 모습을 가지지만 결과적으로 자

바스크립트로 변환됩니다.

JSX

는 리액트가 떠오르면서 함께 인기를 얻었지만 다른 곳에

서도 많이 사용되고 있습니다.

컴포넌트

컴포넌트는 리액트의 기본 구성 요소입니다. 어떠한 입력값 (

Props

)을 받아서 화면에

표시할 내용을 나타내는 리액트의 요소를 반환하는 함수라고 보시면 됩니다. 그러므로

화면에 보이는 모든 것은 사실 컴포넌트의 일부입니다. 기본적으로 리액트는 컴포넌트

안에 또 다른 컴포넌트가 중첩되는 구조라고 볼 수 있습니다. 따라서 개발자들은 리액트

에서 페이지를 각각 구축하는 것이 아니라 컴포넌트를 구축합니다. 컴포넌트는

UI

를 독

립적이고 재사용 가능한 조각으로 나눌 수 있게 해주기 때문입니다. ...