react.dev

3.8 KiB

Raw Blame History

id	title	permalink	next	redirect_from
getting-started-ko-KR	시작해보기	getting-started-ko-KR.html	tutorial-ko-KR.html	docs/index-ko-KR.html

JSFiddle

React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예제를 따라 해 보는 것입니다.

초심자용 키트

초심자용 키트를 내려받아 시작합니다.

초심자용 키트 내려받기 {{site.react_version}}

초심자용 키트의 최상위 디렉터리에 아래의 내용대로 helloworld.html 파일을 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 JSX syntax을 확인하세요. 일반적인 JavaScript로 번역하기 위해 <script type="text/jsx">를 사용하고 JSXTransformer.js를 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.

파일의 분리

React JSX 코드는 분리된 파일로 존재할 수 있습니다. 다음 내용으로 src/helloworld.js를 생성해보세요.

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

그다음 helloworld.html에서 참조합니다:

<script type="text/jsx" src="src/helloworld.js"></script>

크롬 같은 몇몇 브라우저에서는 HTTP를 통해 제공되는 파일이 아니면 로드에 실패하므로 주의하세요.

오프라인 변환

먼저 커맨드라인 도구를 설치합니다. (npm 필요):

npm install -g react-tools

그다음, src/helloworld.js 파일을 일반 JavaScript 파일로 변환합니다:

jsx --watch src/ build/

수정할 때마다 build/helloworld.js 파일이 자동생성됩니다.

React.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

아래의 내용대로 HTML 파일을 업데이트합니다:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- JSXTransformer는 이제 불필요합니다! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

CommonJS를 원하시나요?

만약 React를 browserify, webpack이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, react npm 패키지를 사용하세요. 그 외에도 jsx 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.

다음 단계로

더 알아보려면 튜토리얼과 초심자용 키트의 examples 디렉터리에서 다른 예제들을 확인해 보세요.

커뮤니티의 기여로 운영되는 Wiki도 있습니다: 워크플로우, UI 컴포넌트, 라우팅, 데이터 관리 등

React의 세계에 오신 것을 환영합니다. 행운을 빌어요!

3.8 KiB Raw Blame History