해당글은 React공식문서를 바탕으로 쓰여진 것이며 그외에 참고한 문서는 따로 Reference를 쓰도록하겠다.
React 란?
- 정의 : 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
3가지 특징
선언형(Declarative)
리액트는 한페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 코드를 짜지 않고 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
- 코드 자세한 분석없이도 코드의 의도를 알 수 있게 작성
- JSX(JS와 HTML 결합한 문법)를 이용해 직관적으로 작성
- 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듬
컴포넌트 기반
- 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
- 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발 가능
- 유지보수나 유닛테스트도 가능
- 컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성
- 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리 가능 (state & props)
자유로운 형태와 높은 발전 가능성
- 리액트는 라이브러리 임으로 프레임워크와 달리 JS프로젝트에서 유연하게 적용
- Facebook에서 관리하여 안정적이고 가장 많이 쓰임
- 리액트 네이티브로 모바일 개발 가능
- 서버사이드렌더링이 가능(Next)
React 설치
온라인에서 사용
따로 다운받거나 설치하지 않아도 온라인 코드편집기(CodePen,CodeSandbox,Stackblitz)로도 간편하게 사용가능하다.
로컬에서 사용하는 코드 편집기를 이용하고 싶다면 해당 HTML 파일를 사용하면 된다. 하지만 런타임 코드 변환이 느려서 간단한 데모 사용을 권장한다.
웹사이트에 추가
기존 웹사이트에 필요한 부분에 React를 추가할 수 있다.
예제코드
- HTML파일에 Dom 컨테이너 설치
- 태그에 id를 지정해주면 그 안에 React 컴포넌트를 표시 할 수 있다.
- body태그 안쪽에 위치에 상관없이 추가할 수 있고 독립적인 Dom 컨테이너도 여러개 추가할 수 있다.
- 스크립트 태그 추가
<!-- React를 실행. -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Production -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<!-- JSX Preprocessor -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 만든 React 컴포넌트를 실행. -->
<script src="like_button.js"></script>- React 컴포넌트 만들기
JSX 전처리기 설치 : npm install babel-cli@6 babel-preset-react-app@3
JSX 전처리기 실행 : npx babel --watch src --out-dir . --presets react-app/prod
새로운 앱 제작
Create React App
새로운 싱글 페이지 앱을 구현 가능
# . Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요
npx create-react-app my-app
cd my-app
npm start Next.js
프레임워크로 React로 만들어진 Server Rendering Application
Next.js 공식사이트
Gatsby
React로 만드는 정적페이지
Gatsby
Reference
codestate
Frontend Developer