TIL No.14 [React] 리액트란?

리액트(React)란?

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)` 등
 

리액트 기본 문법 구조 (JSX)

const hi = <p>Hi</p>

JSX는 자바스크립트의 확장버전으로 웹에서 읽히는 문법은 아니지만
node.js기반의 Babel과 같은 컴파일 도구로 웹에서 읽힐수 있게 도와줌

• JavaScript 파일 내에 HTML태그와 아주 비슷하게 생긴 형태의 태그 구조
• React.js를 사용하기 위한 JSX문법이며, JavaScript 문법으로 변환시켜야함

JSX attribute

const hi = <input readOnly={true} />;

const myFavorite = {
	food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
	};

1. 태그에 속성을 주고 싶을 때는 ""쌍따옴표로 감싸주기
   ex) className = "list-item"
2. 셀프 클로징 태그는 마지막에 />로 꼭 닫아줘야함
3. 중첩 된 JSX 코드는 꼭 소괄호로 감싸주기
   ex)

   const good = (
   	<div>
       	<p>hi</p>
       </div>
   	);

   -> O

   const wrong =(
   	<p>list1</p>
       <p>list2</p>
       );

   -> X (감싸주는 태그가 없음)

컴포넌트(Component)란?

UI(User Interface)만을 담당하며,
사용자가 정의한 태그를 컴퍼넌트라고 한다!

컴포넌트르 사용하게 되면
1. 태그의 가독성을 높여주고,
2. 태그의 재사용성 : 다른 HTML파일에서 컴포넌트를 불러 올 수 있음
3. 유지보수 : 버그가 있을 시, 컴포넌트 안에를 수정하게 되면 적용되어있는 파일에 전부 수정이 됨

렌더링

최초 React 설치 후, CRA(Create-React-App) 설치 시,
한개의 HTML파일에서 여러 페이지의 모든 요소를 보여줄 수 있게 세팅이 되어 있으며,
여러 페이지를 `ReactDOM` 패키지로 불러 올 수 있게함.