React는 처음부터 점진적으로 채택되도록 설계되었으므로 필요한만큼 React를 사용할 수 있습니다..
기존페이지에 섞여 상호작용하기를 원할 것입니다. React Component는 이를 수행하는 좋은 방법입니다.
대부분의 웹 사이트는 단일 페이지 앱이 아니며 필요하지도 않습니다. 빌드도구 없이 몇줄의 코드로 웹사이트의 작은 부분부터 React를 적용합니다. 그런 다음 점차 확장하거나 동적 위젯에 포함시켜 나갑니다.
Add React in One Minute
이 섹션에서는 기존 HTML페이지에 React Component를 추가하는 방법을 보여줍니다. 자신의 웹사이트를 따라하거나 빈 HTML파일을 만들어 연습 할 수 있습니다.
복잡한 도구나 설치는 필요하지 않습니다. 인터넷 연결과 1분의 시간만 있으면됩니다.
선택 사항 : 전체 예제 다운로드(2KB zipped)
Step 1: Add a DOM Container to the HTML
먼저 편집 할 HTML페이지를 엽니다.
무엇인가를 표현하고자 하는 지점을 표시하기 위한 빈태그<div>를 추가하세요.
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->예시 코드의 <div>에 고유한 id 속성을 부여 하였습니다.
JavaScript를 이용하여 고유한 id를 찾아 React Component를 적용할 수 있습니다.
팁
필요한만큼<body>태그 어디에서나<div>를 DOM 컨테이너로 배치할 수 있습니다.
React는 이 컨테이너를 React Component로 대체합니다.
Step 2: Add the Script Tags
</body>종료 태그 이전에 아래 3개의 스크립트 태그를<script>추가하세요.
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>처음 두 태그는 React를 로드하는 태그입니다.
세번째로 작성한 Component를 로드합니다.
Step 3: Create a React Component
like_button.js파일을 생성한 후 페이지에서 파일을 불러옵니다.
샘플코드를 열어 like_button.js파일에 붙여넣습니다.
팁
이 코드는 호출 된 LikeButton React Component요소를 정의합니다 . 아직 이해하지 못한다고해서 걱정하지 마십시오. 실습 튜토리얼과 주요 개념 가이드에서 React의 기본 요소를 다룰 것 입니다. 지금은 화면에 표시되도록하십시오!
이 코드를 like_button.js 하단에 두 줄을 추가합니다.
// ... the starter code you pasted ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);이 두 줄의 코드는<div>를 찾은 다음 그 안에 "좋아요"버튼 React Component를 표시합니다.
That’s It!
4 단계는 없습니다. 방금 첫 번째 React Component를 웹 사이트에 추가했습니다.
React 통합에 대한 자세한 팁은 다음 섹션을 확인하십시오.
전체 예제 소스 코드보기
전체 예제 다운로드 (2KB 압축)
Tip: Reuse a Component
일반적으로 React 구성 요소를 HTML 페이지의 여러 위치에 표시 할 수 있습니다. "좋아요"버튼을 세 번 표시하고 일부 데이터를 버튼에 다르게 전달하는 예제는 다음과 같습니다.
전체 예제 소스 코드보기
전체 예제 다운로드 (2KB 압축)
노트
이 전략은 페이지의 React-powered 부분이 서로 격리되어있을 때 주로 유용합니다.
React 코드에서 Component Composition을 더쉽게 사용할수 있습니다.
Tip: Minify JavaScript for Production
프로덕션 환경에 웹 사이트를 배포하기 전 unminifed된 자바 스크립트로 인해 사용자의 페이지 속도가 크게 저하 될 수 있음을 염두해두어야 합니다.
application script가 이미 minifiy된 상태라면 당신의 웹사이트는 배포될 준비가 된 것입니다.
배포 된 HTML이 production.min.js에있는 React의 버전을로드하는지 확인하려면 다음을 수행하세요.
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>스크립트 압축 단계가 없는경우 이를 설정하는 방법이 있습니다.
Optional: Try React with JSX
위의 예제에서는 브라우저가 기본적으로 제공하는 기능만 사용했습니다. 그 이유는 JavaScript 함수 호출을 이용하여 React 적용이 가능하다는 보여주기 위해서입니다.
const e = React.createElement;
// Display a "Like" <button>
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);React는 JSX를 대신 사용할 수 있습니다.
// Display a "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);위 두 코드 snippets은 동일 합니다. JSX는 선택사항이지만 많은 사람들이 JSX가 다른 React 라이브러리와 함께 UI 코드 작성에 도움이된다고 생각합니다.
온라인 Converter를 이용하여 JSX를 변환 할 수 있습니다.
Quickly Try JSX
프로젝트에서 JSX를 시도하는 가장 빠른 방법은 아래 <script>태그를 페이지에 추가 하는 것입니다.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>이제 JSX를 사용할 수 있습니다. <script>태그에 type="text/babel"속성을 추가하여 사용하세요.
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>이 방법은 간단한 데모를 배우고 만드는데 적합합니다. 하지만 웹 사이트가 느려지고 제작에 적합하지 않습니다 . 앞으로 나아갈준비가 되었다면 <script>태그와 type="text/babel"추가 한 속성을 제거하세요.
다음 섹션에서 JSX 전 처리기를 설정하여 모든 <script>태그를 자동으로 변환합니다.
Add JSX to a Project
프로젝트에 JSX를 추가하는 경우 bundler 나 개발 서버와 같은 복잡한 도구가 필요하지 않습니다. 본질적으로 JSX를 추가하는 것은 CSS 전처리기를 추가하는 것과 같습니다. 유일한 요구 사항은 Node.js 가 컴퓨터에 설치되어 있어야합니다.
터미널의 프로젝트 폴더로 이동하여 다음 두 명령을 붙여 넣습니다.
- 1 단계 : 실행 npm init -y(실패 할 경우 참고)
- 2 단계 : 실행 npm install babel-cli@6 babel-preset-react-app@3
팁
여기서는 npm을 사용하여 JSX 전처리기를 설치합니다. 다른 어떤 것도 필요 없습니다.
React와 Application 코드는<script>변경없이 태그로 유지 될 수 있습니다.
축하합니다! 프로덕션에 적합한 JSX 설정을 프로젝트에 추가했습니다.
Run JSX Preprocessor
src 폴터를 만들고 터미널 명령을 실행하십시오.
npx babel --watch src --out-dir . --presets react-app/prod 팁
npx오타가 아닙니다. npm 5.2 이상과 함께 제공되는 패키지 러너 도구입니다.
You have mistakenly installed the babel package라는 오류 메시지가 나타나면 이전 단계를 빠뜨린 것일 수 있습니다 .
같은 폴더에서 수행 한 다음 다시 시도하십시오.
완료 될 때까지 기다리지 마세요.이 명령은 JSX 용 자동 감시기를 시작하는 명령어 입니다.
JSX starter code를 이용하여 src/like_button.js만들면 watcher는 브라우저에 적합한 일반 JavaScript 코드로 preprocessed like_button.js를 만듭니다. JSX로 소스 파일을 편집하면 변환이 자동으로 다시 실행됩니다.
또한 보너스로 클래스와 같은 최신 JavaScript 구문 기능을 구형 브라우저 걱정없이 사용 할 수 있습니다. 방금 사용했던 도구는 Babel이라고 불리며 문서에서 자세한 내용을 배울 수 있습니다.
빌드 도구에 익숙해지고 더 많은 작업을 수행하기를 원한다면 다음 섹션에서는 가장 인기 있고 접근하기 쉬운 툴 체인에 대해 설명합니다.
