mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
Travis CI
@@ -409,7 +409,7 @@
|
||||
<h2><a class="anchor" name="dom--"></a>DOM 조정 회피 <a class="hash-link" href="#dom--">#</a></h2>
|
||||
<p>React는 브라우저에서 렌더된 DOM 하위 트리의 서술자 개념인 <em>가상의 DOM</em>을 사용합니다. 이 병렬적인 서술체는 React가 DOM 노드를 생성하거나 이미 존재하는 DOM 노드에 접근하는 것(JavaScript 객체를 조작하는 것보다 느리죠)을 피하게 해 줍니다. 컴포넌트의 props나 state가 변경되면 React는 새로운 가상의 DOM을 구성해 이전의 것과 비교해서 실제 DOM 업데이트가 필요한지 결정합니다. 가능한 적게 변화를 적용하기 위해, React는 둘이 다를 경우에만 DOM을 <a href="/react/docs/reconciliation-ko-KR.html">조정</a>할 것입니다.</p>
|
||||
|
||||
<p>이에 더해, React는 컴포넌트 생명주기 함수인 <code>shouldComponentUpdate</code>를 제공합니다. 이는 다시 렌더링하는 프로세스가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 <code>true</code>를 반환해 React가 업데이트를 수행하도록 합니다.</p>
|
||||
<p>이에 더해, React는 컴포넌트 생명주기 함수인 <code>shouldComponentUpdate</code>를 제공합니다. 이는 다시 렌더링하는 프로세스(가상 DOM 비교와 어쩌면 일어날 DOM 조정)가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 <code>true</code>를 반환해 React가 업데이트를 수행하도록 합니다.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@@ -407,11 +407,11 @@
|
||||
|
||||
<h2><a class="anchor" name="-"></a>컴포넌트 명세 <a class="hash-link" href="#-">#</a></h2>
|
||||
<p><code>React.createClass()</code>를 호출하여 컴포넌트 클래스를 생성할 때, <code>render</code> 메소드를 포함한 명세 객체를 제공해야 합니다. 또한 필요한 경우 여기에서 설명하는 다른 생명주기 메소드를 명세 객체에 추가로 제공할 수 있습니다.</p>
|
||||
<h3><a class="anchor" name="render"></a>render <a class="hash-link" href="#render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">()</span>
|
||||
<h3><a class="anchor" name="render"></a>render <a class="hash-link" href="#render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactElement</span> <span class="nx">render</span><span class="p">()</span>
|
||||
</code></pre></div>
|
||||
<p><code>render()</code> 메소드는 필수 항목입니다.</p>
|
||||
|
||||
<p>호출되면 <code>this.props</code>와 <code>this.state</code>를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (<code><div /></code>나 <code>React.DOM.div()</code> 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.</p>
|
||||
<p>호출되면 <code>this.props</code>와 <code>this.state</code>를 토대로 하나의 자식 엘리먼트를 리턴합니다. 이 자식 엘리먼트는 네이티브 DOM 컴포넌트의 가상 표현 (<code><div /></code>나 <code>React.DOM.div()</code> 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.</p>
|
||||
|
||||
<p>아무 것도 렌더링되지 않도록 하려면 <code>null</code>이나 <code>false</code>를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 <code><noscript></code> 태그를 렌더링합니다. <code>null</code>이나 <code>false</code>를 리턴한 경우, <code>React.findDOMNode(this)</code>는 <code>null</code>을 리턴합니다.</p>
|
||||
|
||||
|
||||
@@ -430,6 +430,8 @@
|
||||
</code></pre></div><h2><a class="anchor" name="--synthetic-"></a>이벤트 핸들링과 통합적인(Synthetic) 이벤트 <a class="hash-link" href="#--synthetic-">#</a></h2>
|
||||
<p>React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 <a href="http://www.w3.org/TR/DOM-Level-3-Events/">W3C 사양</a>과 같도록 보장됩니다.</p>
|
||||
<h2><a class="anchor" name="----"></a>기본 구현: 오토바인딩과 이벤트 델리게이션 <a class="hash-link" href="#----">#</a></h2>
|
||||
<p><a name="under-the-hood-autobinding-and-event-delegation"></a></p>
|
||||
|
||||
<p>코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.</p>
|
||||
|
||||
<p><strong>오토바인딩:</strong> JavaScript에서 콜백을 만들 때, 보통은 <code>this</code>의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!</p>
|
||||
|
||||
@@ -483,7 +483,7 @@
|
||||
</code></pre></div>
|
||||
<p><code>getDefaultProps()</code>의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 <code>this.props.value</code>가 값을 가질 수 있도록 해주는데 사용됩니다.<code>getDefaultProps()</code>를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.</p>
|
||||
<h2><a class="anchor" name="prop--"></a>Prop 전달하기: 단축 <a class="hash-link" href="#prop--">#</a></h2>
|
||||
<p>React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 <em>spread</em> 문법을 사용하면 이렇게 할 수 있습니다.</p>
|
||||
<p>React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 <em>spread</em> 문법을 사용하면 이렇게 할 수 있습니다.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">CheckLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// 모든 prop을 받아서 CheckLink에 넘기고 <a>에 복사합니다.</span>
|
||||
|
||||
@@ -484,7 +484,7 @@
|
||||
</code></pre></div>
|
||||
<p>The result of <code>getDefaultProps()</code> will be cached and used to ensure that <code>this.props.value</code> will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.</p>
|
||||
<h2><a class="anchor" name="transferring-props-a-shortcut"></a>Transferring Props: A Shortcut <a class="hash-link" href="#transferring-props-a-shortcut">#</a></h2>
|
||||
<p>A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX <em>spread</em> syntax to achieve this:</p>
|
||||
<p>A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX <em>spread</em> syntax to achieve this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">CheckLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// This takes any props passed to CheckLink and copies them to <a></span>
|
||||
|
||||
@@ -479,7 +479,7 @@
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">result</span> <span class="o">=</span> <span class="nx">renderer</span><span class="p">.</span><span class="nx">getRenderOutput</span><span class="p">();</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">type</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">([</span>
|
||||
<span class="o"><</span><span class="nx">span</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"heading"</span><span class="o">></span><span class="nx">Title</span><span class="o"><</span><span class="err">/span></span>
|
||||
<span class="o"><</span><span class="nx">span</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"heading"</span><span class="o">></span><span class="nx">Title</span><span class="o"><</span><span class="err">/span>,</span>
|
||||
<span class="o"><</span><span class="nx">Subcomponent</span> <span class="nx">foo</span><span class="o">=</span><span class="s2">"bar"</span> <span class="o">/></span>
|
||||
<span class="p">]);</span>
|
||||
</code></pre></div>
|
||||
|
||||
@@ -408,9 +408,9 @@
|
||||
<p>React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 <strong><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a></strong> 에서의 <strong>V</strong> 로 생각하는 경향이 있습니다.</p>
|
||||
|
||||
<p>우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: <strong>지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.</strong> 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.</p>
|
||||
<h3><a class="anchor" name=""></a>단순함 <a class="hash-link" href="#">#</a></h3>
|
||||
<h2><a class="anchor" name=""></a>단순함 <a class="hash-link" href="#">#</a></h2>
|
||||
<p>당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.</p>
|
||||
<h3><a class="anchor" name="-"></a>선언적 문법 <a class="hash-link" href="#-">#</a></h3>
|
||||
<h2><a class="anchor" name="-"></a>선언적 문법 <a class="hash-link" href="#-">#</a></h2>
|
||||
<p>데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.</p>
|
||||
<h2><a class="anchor" name="--"></a>구성적인 컴포넌트를 만드세요 <a class="hash-link" href="#--">#</a></h2>
|
||||
<p>React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩니다. 사실, React를 사용하면 <em>단지</em> 컴포넌트를 만드는 일만 하게 됩니다. 컴포넌트들은 잘 캡슐화되어 되어 있기 때문에, 컴포넌트들은 코드의 재사용성을 높이고, 테스트를 쉽게 해 주며, 관심 분리의 원칙(separation of concerns)을 지키게 해 줍니다.</p>
|
||||
|
||||
+2
-2
@@ -408,9 +408,9 @@
|
||||
<p>React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the <strong>V</strong> in <strong><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a></strong>.</p>
|
||||
|
||||
<p>We built React to solve one problem: <strong>building large applications with data that changes over time</strong>. To do this, React uses two main ideas.</p>
|
||||
<h3><a class="anchor" name="simple"></a>Simple <a class="hash-link" href="#simple">#</a></h3>
|
||||
<h2><a class="anchor" name="simple"></a>Simple <a class="hash-link" href="#simple">#</a></h2>
|
||||
<p>Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.</p>
|
||||
<h3><a class="anchor" name="declarative"></a>Declarative <a class="hash-link" href="#declarative">#</a></h3>
|
||||
<h2><a class="anchor" name="declarative"></a>Declarative <a class="hash-link" href="#declarative">#</a></h2>
|
||||
<p>When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.</p>
|
||||
<h2><a class="anchor" name="build-composable-components"></a>Build Composable Components <a class="hash-link" href="#build-composable-components">#</a></h2>
|
||||
<p>React is all about building reusable components. In fact, with React the <em>only</em> thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.</p>
|
||||
|
||||
@@ -486,9 +486,9 @@
|
||||
<h2><a class="anchor" name="browser-support-and-polyfills"></a>Browser Support and Polyfills <a class="hash-link" href="#browser-support-and-polyfills">#</a></h2>
|
||||
<p>At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing <code>+new Date()</code>, we can just write <code>Date.now()</code>. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.</p>
|
||||
|
||||
<p>In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like <a href="https://github.com/kriskowal/es5-shim">es5-shim</a>.</p>
|
||||
<p>In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like <a href="https://github.com/es-shims/es5-shim">es5-shim</a>.</p>
|
||||
<h3><a class="anchor" name="polyfills-needed-to-support-older-browsers"></a>Polyfills Needed to Support Older Browsers <a class="hash-link" href="#polyfills-needed-to-support-older-browsers">#</a></h3>
|
||||
<p><code>es5-shim.js</code> from <a href="https://github.com/kriskowal/es5-shim">kriskowal's es5-shim</a> provides the following that React needs:</p>
|
||||
<p><code>es5-shim.js</code> from <a href="https://github.com/es-shims/es5-shim">kriskowal's es5-shim</a> provides the following that React needs:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>Array.isArray</code></li>
|
||||
@@ -503,7 +503,7 @@
|
||||
<li><code>String.prototype.trim</code></li>
|
||||
</ul>
|
||||
|
||||
<p><code>es5-sham.js</code>, also from <a href="https://github.com/kriskowal/es5-shim">kriskowal's es5-shim</a>, provides the following that React needs:</p>
|
||||
<p><code>es5-sham.js</code>, also from <a href="https://github.com/es-shims/es5-shim">kriskowal's es5-shim</a>, provides the following that React needs:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>Object.create</code></li>
|
||||
|
||||
@@ -424,12 +424,12 @@
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">GroceryList</span> <span class="nx">items</span><span class="o">=</span><span class="p">{[</span><span class="s1">'사과'</span><span class="p">,</span> <span class="s1">'바나나'</span><span class="p">,</span> <span class="s1">'크랜베리'</span><span class="p">]}</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span> <span class="p">);</span>
|
||||
<span class="o"><</span><span class="nx">GroceryList</span> <span class="nx">items</span><span class="o">=</span><span class="p">{[</span><span class="s1">'사과'</span><span class="p">,</span> <span class="s1">'바나나'</span><span class="p">,</span> <span class="s1">'크랜베리'</span><span class="p">]}</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p><code>bind(this, arg1, arg2, ...)</code>의 사용을 확인하세요: 간단히 <code>handleClick</code>에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠.</p>
|
||||
|
||||
<p>부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다.
|
||||
<code>componentDidMount()</code>에서 이벤트를 구독하고, <code>componentWillUnmount()</code>에서 해제합니다. 이벤트를 받으면 <code>setState()</code>를 호출합니다.</p>
|
||||
<p>부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. <code>componentDidMount()</code>에서 이벤트를 구독하고, <code>componentWillUnmount()</code>에서 해제합니다. 이벤트를 받으면 <code>setState()</code>를 호출합니다. <a href="https://facebook.github.io/flux/">Flux</a> 패턴은 이를 정리하는 방법 중 하나입니다.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
@@ -0,0 +1,484 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>컴포넌트에서 DOM 이벤트 리스너 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="컴포넌트에서 DOM 이벤트 리스너 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/tips/dom-event-listeners-ko-KR.html">
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
||||
<li><a href="/react/support.html">Support</a></li>
|
||||
<li><a href="/react/downloads.html">Download</a></li>
|
||||
<li><a href="/react/blog/">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="http://facebook.github.io/react-native/">React Native</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>컴포넌트에서 DOM 이벤트 리스너</h1>
|
||||
<div class="subHeader"></div>
|
||||
<blockquote>
|
||||
<p>주의:</p>
|
||||
|
||||
<p>이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. (<a href="/react/docs/events-ko-KR.html">더 자세한 정보는 여기에서 보세요.</a>). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>윈도우 크기를 조절해봅시다.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">Box</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">windowWidth</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">handleResize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">windowWidth</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'resize'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleResize</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">'resize'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleResize</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Current</span> <span class="nb">window</span> <span class="nx">width</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">windowWidth</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">Box</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 <code>componentDidMount</code>가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다.</p>
|
||||
|
||||
<p>이벤트 콜백은 원래 엘리먼트 대신 React 컴포넌트에 바인드하는 걸 주의합시다. React는 <a href="/react/docs/interactivity-and-dynamic-uis-ko-KR.html#under-the-hood-autobinding-and-event-delegation">오토바인드</a> 과정에서 메서드를 현재 컴포넌트 인스턴스로 바인드합니다.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/tips/props-in-getInitialState-as-anti-pattern-ko-KR.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/tips/initial-ajax-ko-KR.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,462 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>JSX에서 False | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="JSX에서 False | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/tips/false-in-jsx-ko-KR.html">
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
||||
<li><a href="/react/support.html">Support</a></li>
|
||||
<li><a href="/react/downloads.html">Download</a></li>
|
||||
<li><a href="/react/blog/">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="http://facebook.github.io/react-native/">React Native</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>JSX에서 False</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p><code>false</code> 렌더링이 여러 문맥에서 어떻게 다뤄지는지 봅시다.</p>
|
||||
|
||||
<p><code>id="false"</code>로 렌더링</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>문자열 <code>"false"</code>를 입력값으로</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">input</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>자식 없음</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o"><</span><span class="err">/div>, mountNode);</span>
|
||||
</code></pre></div>
|
||||
<p><code>div</code> 자식으로 쓰인 문자열 <code>"false"</code>를 렌더링하지 않은 것은 더 일반적인 사용 사례를 허용하기 위함입니다. <code><div>{x > 1 && '하나 이상의 아이템을 가졌습니다.'}</div></code></p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/tips/initial-ajax-ko-KR.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/tips/communicate-between-components-ko-KR.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,489 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>AJAX를 통해 초기 데이터 읽어오기 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="AJAX를 통해 초기 데이터 읽어오기 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/tips/initial-ajax-ko-KR.html">
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
||||
<li><a href="/react/support.html">Support</a></li>
|
||||
<li><a href="/react/downloads.html">Download</a></li>
|
||||
<li><a href="/react/blog/">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="http://facebook.github.io/react-native/">React Native</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Community Resources</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/conferences.html">Conferences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/videos.html">Videos</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/complementary-tools.html">Complementary Tools</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">Examples</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">Why React?</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">Forms</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">More About Refs</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">Animation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">Class Name Manipulation</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/clone-with-props.html">Cloning Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">Component API</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">Event System</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Flux</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/overview.html">Flux Overview</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://facebook.github.io/flux/docs/todo-list.html">Flux TodoMVC Tutorial</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/references-to-components.html">References to Components</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>AJAX를 통해 초기 데이터 읽어오기</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p><code>componentDidMount</code>에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다.</p>
|
||||
|
||||
<p>비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 <code>this.isMounted()</code>를 사용합니다.</p>
|
||||
|
||||
<p>이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">UserGist</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">username</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span>
|
||||
<span class="nx">lastGistUrl</span><span class="o">:</span> <span class="s1">''</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">source</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">lastGist</span> <span class="o">=</span> <span class="nx">result</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isMounted</span><span class="p">())</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
|
||||
<span class="nx">username</span><span class="o">:</span> <span class="nx">lastGist</span><span class="p">.</span><span class="nx">owner</span><span class="p">.</span><span class="nx">login</span><span class="p">,</span>
|
||||
<span class="nx">lastGistUrl</span><span class="o">:</span> <span class="nx">lastGist</span><span class="p">.</span><span class="nx">html_url</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span><span class="err">'</span><span class="nx">s</span> <span class="nx">last</span> <span class="nx">gist</span> <span class="nx">is</span>
|
||||
<span class="o"><</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">lastGistUrl</span><span class="p">}</span><span class="o">></span><span class="nx">here</span><span class="o"><</span><span class="err">/a>.</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">UserGist</span> <span class="nx">source</span><span class="o">=</span><span class="s2">"https://api.github.com/users/octocat/gists"</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">mountNode</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/tips/dom-event-listeners-ko-KR.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/tips/false-in-jsx-ko-KR.html">Next →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user