리액트 ( React )
정의
리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리, 혹은 폴더구조가 짜여진 프레임워크입니다.
리액트를 사용하여 SPA를 더 쉽고 확장성있게 만들 수 있습니다.
- SPA (Single Page Application)
브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다
리액트 실행방법
리액트는 기본적으로 최소로 2개의 라이브러리만 있으면 리액트를 만들수 있다.
2가지는 React와 React-Dom 라이브러리가 필요하다.
React - 기본 react 문법
CDN 링크<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
결과값은 객체입니다.
React.createElement()
(Element명,속성값,innerHtml 내용)
1번째 인자값 엘리먼트명
2번째 인자값 속성값 / 두번째 인자값의 데이터 타입은 object로 여러 속성값 넣을 수 있습니다.
3번째 인자값 innerHTML 내용
React-Dom - 코드에 알고리즘을 찾아 내가 전에 만든 값과 새로 넣은 값을 비교하여 변한 부분만 바꿔 껴주는 라이브러리입니다.
ReactDOM은 기본적으로 하나의 컴포넌트만 실행을 해줍니다.
CDN 링크<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
결과값은 객체입니다.
ReactDOM.render( )
(화면에 렌더할 내용,내용을 넣을 위치)
1번째 인자값 화면에 렌더할 내용
2번째 인자값 내용을 넣을 위치
JSX
정의
javscript의 확장 문법으로 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 Babel을 사용하여 javascript 형태의 코드로 반환합니다.
- 참고
번들링(Bundling)이란 기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 합니다.
Babel
문법을 바꾸는 용도
CDN 링크<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Babel 문법
<script type="text/babel> </script>" 꼭 써주어야합니다.
Babel 문법을 사용해서 엘리먼트에 속성값을 부여하였습니다.
컴포넌트 ( Components )
정의
컴포넌트는 UI를 재사용이 가능한 여러조각으로 함수로 빼서, 후에 쉽게 재사용할 수 있습니다.
컴포넌트의 종류에는 클래스형과 함수형이 있는데 클래스형 컴포넌트는 현재 자주 사용하지 않지만, 사용하는 기업들이 있습니다. 그 프로젝트의 유지보수 및 사용하기 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야합니다.
Class Component
기본 문법
class App extends React.Component{ render( ){ return( 리턴 내용 ) } }
Class Component로 버튼 생성
여러개의 Component를 사용할 경우
여러개의 Element를 사용할 경우
여러개의 Element를 사용할때 React는 하나의 컴포먼트만 return 할 수 있기 때문에 return문 안에 반드시 최상위 엘리먼트들이 있어야 합니다.
하지만 이럴경우 불필요한 Element를 생성해야 하기 때문에 React.Fragment를 사용하여 최상위 엘리먼트를 추가하지 않고 사용할 수 있습니다.
