React.js는 사용자 인터페이스(UI)를 만들기 위한 JavaScript Library
이며,
웹의 발전으로 Js의 DOM
, EVENT
함수의 복잡함을 탈피하고자,
JQuery
라는 라이브러리가 발전하였으며, 보다 효율적으로 코드를 관리하고자
2010년 구글에서 만든 앵귤러
, 2014년 에반유에 의해 만들어진 뷰
, 2013년 페이스북에서 만든 리액트
등의 프레임워크(라이브러리)가 발달함.
리액트와 같은 프론트엔드 라이브러리 or 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해주기 때문에
UI를 빠르게 업데이트가 가능하며, 리액트는 가상 돔(Virtual Dom)을 통해 재사용이 필요한 기능을 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용 할 수 있도록 함.
프로그램 제작 시 필요한 기능 중 하나로, 재사용이 필요한 기능의 반복적인 코드 작성을 없애기 위해
언제든지 필요한 곳에서 호출하여 사용 할 수 있도록 해주는 기능입니다.
* 대표적인 자바스크립트 라이브러리 : jQuery, Window Os의 DLL(dynamic-link library, React
* 그 외 중요 용어 : `프레임워크(Framework)`, `아키텍처(Architecture)`, `플랫폼(Platform)` 등
const hi = <p>Hi</p>
JSX
는 자바스크립트의 확장버전으로 웹에서 읽히는 문법은 아니지만
node.js
기반의 Babel
과 같은 컴파일 도구로 웹에서 읽힐수 있게 도와줌
const hi = <input readOnly={true} />;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>
};
className = "list-item"
/>
로 꼭 닫아줘야함const good = (
<div>
<p>hi</p>
</div>
);
-> Oconst wrong =(
<p>list1</p>
<p>list2</p>
);
-> X (감싸주는 태그가 없음)UI(User Interface)만을 담당하며,
사용자가 정의한 태그를 컴퍼넌트라고 한다!
컴포넌트르 사용하게 되면
1. 태그의 가독성을 높여주고,
2. 태그의 재사용성 : 다른 HTML파일에서 컴포넌트를 불러 올 수 있음
3. 유지보수 : 버그가 있을 시, 컴포넌트 안에를 수정하게 되면 적용되어있는 파일에 전부 수정이 됨
최초 React 설치 후, CRA(Create-React-App) 설치 시,
한개의 HTML파일에서 여러 페이지의 모든 요소를 보여줄 수 있게 세팅이 되어 있으며,
여러 페이지를 `ReactDOM` 패키지로 불러 올 수 있게함.