diff --git a/docs/02-displaying-data.ko-KR.md b/docs/02-displaying-data.ko-KR.md index f90fc1a67..df801d155 100644 --- a/docs/02-displaying-data.ko-KR.md +++ b/docs/02-displaying-data.ko-KR.md @@ -19,6 +19,7 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하 Hello React + @@ -54,7 +55,6 @@ setInterval(function() { }, 500); ``` - ## 반응 적(Reactive) 업데이트 `hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다. @@ -63,7 +63,6 @@ setInterval(function() { 이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다. - ## 컴포넌트들은 함수와 같습니다 React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` 와 `state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 이걸 염두하면, 컴포넌트의 작동을 이해하는 것도 쉽습니다. @@ -72,7 +71,6 @@ React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` > > **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다. - ## JSX 문법 우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다. @@ -91,12 +89,11 @@ JSX를 이용하면: 우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.** -JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html). 를 살펴 보시기 바랍니다. 또는, [우리의 온라인 JSX 컴파일러](/react/jsx-compiler.html)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다. +JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다. JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다. -JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](https://www.npmjs.com/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다. - +[바벨에서 JSX를 시작하는 여러 방법을 제공합니다](http://babeljs.io/docs/setup/). 여기에는 커맨드 라인 툴부터 루비 온 레일스 연동까지 다양한 방법이 있습니다. 가장 편한 툴을 사용하세요. ## JSX 없이 React 사용하기 diff --git a/docs/02.1-jsx-in-depth.ko-KR.md b/docs/02.1-jsx-in-depth.ko-KR.md index fcd1f08d0..cbcdea803 100644 --- a/docs/02.1-jsx-in-depth.ko-KR.md +++ b/docs/02.1-jsx-in-depth.ko-KR.md @@ -83,7 +83,7 @@ var Nav = React.createClass({ }); var Nav = React.createClass({displayName: "Nav", }); ``` -[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다. +[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다. JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다. diff --git a/docs/02.2-jsx-spread.ko-KR.md b/docs/02.2-jsx-spread.ko-KR.md index 7ec53d1a3..4c2a5d0cd 100644 --- a/docs/02.2-jsx-spread.ko-KR.md +++ b/docs/02.2-jsx-spread.ko-KR.md @@ -12,7 +12,7 @@ next: jsx-gotchas-ko-KR.html var component = ; ``` -## Props의 변경은 나빠요.[^1] +## Props의 변경은 나빠요 하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다. @@ -50,7 +50,3 @@ props는 변하지 않는 것으로 간주해야 합니다. props 객체를 변 ## 이상한 `...` 표기법은 무엇인가요? `...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다. - -[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에 - 나온 대사 "[Drug is bad, mkay](https://www.youtube-nocookie.com/watch?v=Uh7l8dx-h8M)"의 - 패러디입니다. diff --git a/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/03-interactivity-and-dynamic-uis.ko-KR.md index 0a145a314..ef3b3526c 100644 --- a/docs/03-interactivity-and-dynamic-uis.ko-KR.md +++ b/docs/03-interactivity-and-dynamic-uis.ko-KR.md @@ -8,7 +8,6 @@ next: multiple-components-ko-KR.html 이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠. - ## 간단한 예제 ```javascript @@ -35,34 +34,29 @@ ReactDOM.render( ); ``` - ## 이벤트 핸들링과 통합적인(Synthetic) 이벤트 React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다. - ## 기본 구현: 오토바인딩과 이벤트 델리게이션 코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다. -**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠! +**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다.(ES6 클래스 문법을 사용할 때는 재외하고) React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠! **이벤트 델리게이션:** React는 실제로는 노드자신에게 이벤트 핸들러를 붙이지 않습니다. React가 시작되면 React는 탑 레벨의 단일 이벤트 리스너로 모든 이벤트를 리스닝하기 시작합니다. 컴포넌트가 마운트되거나 언마운트 될 때, 이벤트 핸들러는 그냥 내부 매핑에서 넣거나 뺄 뿐입니다. 이벤트가 발생하면, React는 이 매핑을 사용해서 어떻게 디스패치할 지를 알게 됩니다. 매핑에 이벤트 핸들러가 남아있지 않으면, React의 이벤트 핸들러는 그냥 아무것도 하지 않습니다. 왜 이 방식이 빠른지 더 알고 싶으시면, [David Walsh의 멋진 블로그 글](http://davidwalsh.name/event-delegate)을 읽어 보세요. - ## 컴포넌트는 그냥 state 머신일 뿐 React는 UI를 간단한 state 머신이라 생각합니다. UI를 다양한 state와 그 state의 렌더링으로 생각함으로써 UI를 일관성 있게 관리하기 쉬워집니다. React에서는, 간단히 컴포넌트의 state를 업데이트하고, 이 새로운 state의 UI를 렌더링합니다. React는 DOM의 변경을 가장 효율적인 방법으로 관리해줍니다. - ## state의 동작 원리 React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(data, callback)`을 호출하는 것입니다. 이 메소드는 `this.state`에 `data`를 머지하고 컴포넌트를 다시 렌더링 합니다. 컴포넌트의 재-렌더링이 끝나면, 생략가능한 `callback`이 호출됩니다. 대부분의 경우 React가 UI를 최신상태로 유지해주기 때문에 `callback`을 사용할 필요가 없습니다. - ## 어떤 컴포넌트가 state를 가져야 할까요? 대부분의 컴포넌트는 `props`로부터 데이터를 받아 렌더할 뿐입니다만, 가끔 유저 인풋, 서버 요청, 시간의 경과에 반응해야 할 필요가 있습니다. 이럴 때 state를 사용합니다. @@ -71,7 +65,6 @@ React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(da 일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다. - ## state를 어떻게 *써야* 할까요? **state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠. @@ -82,4 +75,4 @@ React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(da * **계산된 데이터:** state에 따라 값을 미리 계산하는 것에 대해 염려하지 마세요. 계산은 모두 `render()`에서 하는 것이 UI의 일관성을 유지하기 쉽습니다. 예를 들어, state에서 list items 배열을 가지고 있고 문자열으로 카운트를 렌더링 할 경우, state에 저장하기보다는 그냥 `render()` 메소드안에서 `this.state.listItems.length + ' list items'`를 렌더하세요. * **React 컴포넌트:** 가지고 있는 props와 state로 `render()`안에서 만드세요. -* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 시간이 지나면 변경될 수도 있기 때문이죠. +* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 부모 컴포넌트의 재 렌더링의 결과 변경될 수도 있기 때문이죠. diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md index 70ec3bb38..ec8d8c751 100644 --- a/docs/04-multiple-components.ko-KR.md +++ b/docs/04-multiple-components.ko-KR.md @@ -8,12 +8,10 @@ next: reusable-components-ko-KR.html 지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다. - ## 동기: 관심의 분리 명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다. - ## 조합(Composition) 예제 간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다. @@ -54,14 +52,12 @@ ReactDOM.render( ); ``` - ## 소유권(Ownership) -위의 예제에서, `Avatar` 인스턴스는 `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 중요한 성질은 UI가 일관성 있도록 해줍니다. +위의 예제에서, `Avatar` 인스턴스는 `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 근본적인 불변성은 UI가 일관성 있도록 해줍니다. 소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다. 위의 예제에서, `Avatar`는 `div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div`는 `ProfilePic`과 `ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다. - ## 자식 React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠. @@ -72,7 +68,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 `Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다. - ### 자식 Reconciliation (비교조정) **Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다. @@ -91,7 +86,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 직관적으로 보면, `

Paragraph 1

`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다. - ### 상태기반(Stateful) 자식 대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다. @@ -111,7 +105,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 ``` - ### 동적 자식 @@ -179,7 +172,6 @@ ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도 React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자로부터 소유한 컴포넌트로 흐릅니다. 이것은 사실상 단방향 데이터 바인딩입니다. 소유자는 `props`나 `state`를 기준으로 계산한 어떤 값으로 소유한 컴포넌트의 props를 바인드합니다. 이 과정은 재귀적으로 발생하므로, 데이터의 변경은 자동으로 모든 곳에 반영됩니다. - ## 성능의 주의점 소유자가 가지고 있는 노드의 수가 많아지면 데이터가 변화하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다. diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md index c53f7abca..f7633d5a7 100644 --- a/docs/05-reusable-components.ko-KR.md +++ b/docs/05-reusable-components.ko-KR.md @@ -8,7 +8,6 @@ next: transferring-props-ko-KR.html 인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등.)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠. - ## Prop 검증 앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다. @@ -78,7 +77,6 @@ React.createClass({ }); ``` - ## 기본 Prop 값 React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다. @@ -230,3 +228,30 @@ Counter.defaultProps = { initialCount: 0 }; ### 믹스인 안됨 불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다. + + +## 상태를 가지지 않는 함수 + +React 클래스를 일반 JavaScript 함수로 작성할 수도 있습니다. 상태를 가지지 않는 함수 문법을 사용하는 예제입니다. + +```javascript +function HelloMessage(props) { + return
Hello {props.name}
; +} +ReactDOM.render(, mountNode); +``` + +아니면 ES6의 화살표 문법을 사용할 수 있습니다. + +```javascript +var HelloMessage = (props) =>
Hello {props.name}
; +ReactDOM.render(, mountNode); +``` + +이 단순화된 컴포넌트 API는 prop의 순수 함수인 컴포넌트를 나타냅니다. 이 컴포넌트는 내부 상태가 없어야 하고, 내부 인스턴스가 없어야 하고, 컴포넌트 생명주기 메소드가 없어야 합니다. 아무런 준비 과정없이 입력에 대한 순수한 기능적 변환이어야 합니다. + +> 주의: +> +> 상태를 가지지 않는 함수는 내부 인스턴스가 없기 때문에, ref를 상태를 가지지않는 함수에 넣을 수 없습니다. 상태를 가지지 않는 함수는 명령형(imperative) API를 제공하지 않기 때문에 일반적으로 이것은 문제가 되지 않습니다. 명령형 API없이 인스턴스에 할 수 있는 것이 많지 않기도 하죠. 하지만 상태를 가지지 않는 컴포넌트의 DOM 노드를 검색하길 원한다면, 반드시 상태 기반 컴포넌트(예. ES6 클래스 컴포넌트)로 컴포넌트를 감싸고 상태 기반 래퍼 컴포넌트에 ref를 붙여야 합니다. + +이상적으로는, 대부분의 컴포넌트는 상태를 가지지 않는 함수여야 합니다. 왜냐 하면 이런 상태를 가지지 않는 컴포넌트는 React 코어 안에서 더 빠른 코드 경로를 거치기 때문입니다. 이는 가능한 한 추천하는 패턴입니다. diff --git a/docs/06-transferring-props.ko-KR.md b/docs/06-transferring-props.ko-KR.md index 0923a4cb3..02aa86cf6 100644 --- a/docs/06-transferring-props.ko-KR.md +++ b/docs/06-transferring-props.ko-KR.md @@ -51,7 +51,8 @@ ReactDOM.render( > 주의: > -> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, ` - +
diff --git a/docs/ref-01-top-level-api.ko-KR.md b/docs/ref-01-top-level-api.ko-KR.md index e43ca838b..bb6197029 100644 --- a/docs/ref-01-top-level-api.ko-KR.md +++ b/docs/ref-01-top-level-api.ko-KR.md @@ -68,6 +68,73 @@ factoryFunction createFactory( 주어진 타입의 ReactElement를 만들어주는 함수를 리턴합니다. `React.createElement`와 마찬가지로 `type` 인자는 HTML 태그명 문자열 (예: 'div', 'span' 등) 또는 `ReactClass`입니다. +### React.isValidElement + +```javascript +boolean isValidElement(* object) +``` + +주어진 객체가 ReactElement인지 확인합니다. + + +### React.DOM + +`React.DOM`은 DOM 컴포넌트에 대해 `React.createElement`의 편의 래퍼(wrapper)를 제공합니다. JSX를 사용하지 않는 경우에만 사용하십시오. 예를 들어, `React.DOM.div(null, 'Hello World!')`와 같이 사용할 수 있습니다. + + +### React.PropTypes + +`React.PropTypes`는 컴포넌트에 넘어오는 props가 올바른지 검사할 수 있는 컴포넌트의 `propTypes` 객체에 들어가는 타입을 가집니다. `propTypes`에 대한 자세한 정보는 [재사용 가능한 컴포넌트](/react/docs/reusable-components-ko-KR.html)를 참고하세요. + + +### React.Children + +`React.Children`은 불투명한 자료 구조인 `this.props.children`를 다룰 수 있는 유틸리티를 제공합니다. + +#### React.Children.map + +```javascript +array React.Children.map(object children, function fn [, object thisArg]) +``` + +`children`의 바로 밑에 있는 모든 자식에 `fn`을 호출합니다. 이 때 `this`는 `thisArg`로 설정됩니다. `children`이 중첩된 객체나 배열일 경우 그 안의 값을 순회합니다. 따라서 `fn`에 컨테이너 객체가 넘어가는 일은 일어나지 않습니다. `children`이 `null`이거나 `undefined`면 배열 대신 `null` 또는 `undefined`를 리턴합니다. + +#### React.Children.forEach + +```javascript +React.Children.forEach(object children, function fn [, object thisArg]) +``` + +`React.Children.map()`과 비슷하지만 배열을 리턴하지 않습니다. + +#### React.Children.count + +```javascript +number React.Children.count(object children) +``` + +`children`에 들어있는 컴포넌트의 총 갯수를 리턴합니다. 이 갯수는 `map`이나 `forEach`에 넘긴 콜백이 호출되는 횟수와 동일합니다. + +#### React.Children.only + +```javascript +object React.Children.only(object children) +``` + +`children`에 단 하나의 자식이 있을 때 그 자식을 리턴합니다. 그 밖의 경우에는 예외를 발생시킵니다. + +#### React.Children.toArray + +```javascript +array React.Children.toArray(object children) +``` + +불투명한 자료구조인 `children`를 개별 자식마다 키를 할당해 평면 배열로 리턴합니다. 이는 render 메소드 내에서 자식의 컬렉션을 조작할 때, 특히 `this.props.children`을 넘기기 전에 재정렬하거나 재단할 때 유용합니다. + +## ReactDOM + +`react-dom` 패키지는 앱의 최상위 레벨에서 사용될 DOM 고유의 메소드를 제공하며, 원한다면 리액트 외부모델을 위한 출구로 사용될 수 있습니다. 대부분의 컴포넌트는 이 모듈을 사용할 필요가 없습니다. + ### ReactDOM.render ```javascript @@ -78,7 +145,7 @@ ReactComponent render( ) ``` -주어진 ReactElement를 `container` 인자에 넘어온 DOM 안에 렌더링하고 컴포넌트의 레퍼런스를 리턴합니다. +주어진 ReactElement를 `container` 인자에 넘어온 DOM 안에 렌더링하고 컴포넌트의 [레퍼런스](/react/docs/more-about-refs-ko-KR.html)를 컴포넌트에 리턴합니다. [상태가 없는 컴포넌트](/react/docs/reusable-components-ko-KR.html#stateless-functions)에서는 `null`을 리턴합니다. 어떤 ReactElement가 이미 `container`에 렌더링 된 적이 있다면, 그것을 업데이트한 뒤 React 컴포넌트의 최신 상태를 반영하기 위해 꼭 필요한 만큼만 DOM을 변경합니다. @@ -100,7 +167,26 @@ boolean unmountComponentAtNode(DOMElement container) DOM에 마운트된 React 컴포넌트를 제거하고 이벤트 핸들러 및 state를 정리합니다. 컨테이너에 마운트된 컴포넌트가 없는 경우에는 호출해도 아무 동작을 하지 않습니다. 컴포넌트가 마운트 해제된 경우 `true`를, 마운트 해제할 컴포넌트가 없으면 `false`를 리턴합니다. -### ReactDOM.renderToString +### ReactDOM.findDOMNode + +```javascript +DOMElement findDOMNode(ReactComponent component) +``` +이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. **대부분의 경우, DOM 노드에 ref를 쓸 수 있으며 `findDOMNode`를 사욯할 필요는 없습니다.** `render`가 `null`이나 `false`를 리턴할 때 `findDOMNode()`는 `null`을 리턴합니다. + +> 주의: +> +> `findDOMNode()`는 기본 DOM 노드에 접근하기 위한 출구입니다. 컴포넌트 추상화를 파괴하기 때문에 대부분의 경우 이것의 사용은 권장되지 않습니다. +> +> `findDOMNode()`는 마운트된 컴포넌트에서만 작동합니다. 이는 컴포넌트가 DOM에 위치해야 함을 뜻합니다. 만약 아직 생성되기전의 컴포넌트에서 `render()`에서 `findDOMNode()`를 호출하는 등 컴포넌트가 마운트 되기 이전에 이를 호출한다면, 예외가 던져질 것입니다. +> +> `findDOMNode()`는 상태가없는 컴포넌트에서 쓸 수 없습니다. + +## ReactDOMServer + +`react-dom/server` 패키지는 서버단에서 컴포넌트를 렌더할 수 있도록 해 줍니다. + +### ReactDOMServer.renderToString ```javascript string renderToString(ReactElement element) @@ -111,73 +197,10 @@ string renderToString(ReactElement element) 또한 이 메소드로 서버에서 렌더링한 마크업을 포함한 노드에 `ReactDOM.render()`를 호출하면, React는 마크업을 보존하고 이벤트 핸들러만 붙이므로 최초 로딩을 매우 빠르게 느껴지게 할 수 있습니다. -### ReactDOM.renderToStaticMarkup +### ReactDOMServer.renderToStaticMarkup ```javascript string renderToStaticMarkup(ReactElement element) ``` `renderToString`와 비슷하지만 `data-react-id`처럼 React에서 내부적으로 사용하는 추가적인 DOM 어트리뷰트를 만들지 않습니다. 추가적인 어트리뷰트를 제거하면 생성되는 마크업의 용량을 줄일 수 있기 때문에 React를 단순한 정적 페이지 생성기로 사용할 때 유용합니다. - - -### ReactDOM.isValidElement - -```javascript -boolean isValidElement(* object) -``` - -주어진 객체가 ReactElement인지 확인합니다. - -### ReactDOM.findDOMNode - -```javascript -DOMElement findDOMNode(ReactComponent component) -``` -이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴할 때 `findDOMNode()`는 `null`을 리턴합니다. - - -### React.DOM - -`React.DOM`은 DOM 컴포넌트에 대해 `React.createElement`의 편의 래퍼(wrapper)를 제공합니다. JSX를 사용하지 않는 경우에만 사용하십시오. 예를 들어, `React.DOM.div(null, 'Hello World!')`와 같이 사용할 수 있습니다. - - -### React.PropTypes - -`React.PropTypes`는 컴포넌트에 넘어오는 props가 올바른지 검사할 수 있는 컴포넌트의 `propTypes` 객체에 들어가는 타입을 가집니다. `propTypes`에 대한 자세한 정보는 [재사용 가능한 컴포넌트](/react/docs/reusable-components-ko-KR.html)를 참고하세요. - - -### React.Children - -`React.Children`은 불투명한 자료 구조인 `this.props.children`를 다룰 수 있는 유틸리티를 제공합니다. - -#### React.Children.map - -```javascript -object React.Children.map(object children, function fn [, object thisArg]) -``` - -`children`의 바로 밑에 있는 모든 자식에 `fn`을 호출합니다. 이 때 `this`는 `thisArg`로 설정됩니다. `children`이 중첩된 객체나 배열일 경우 그 안의 값을 순회합니다. 따라서 `fn`에 컨테이너 객체가 넘어가는 일은 일어나지 않습니다. `children`이 `null`이거나 `undefined`면 빈 객체 대신 `null` 또는 `undefined`를 리턴합니다. - -#### React.Children.forEach - -```javascript -React.Children.forEach(object children, function fn [, object thisArg]) -``` - -`React.Children.map()`과 비슷하지만 객체를 리턴하지 않습니다. - -#### React.Children.count - -```javascript -number React.Children.count(object children) -``` - -`children`에 들어있는 컴포넌트의 총 갯수를 리턴합니다. 이 갯수는 `map`이나 `forEach`에 넘긴 콜백이 호출되는 횟수와 동일합니다. - -#### React.Children.only - -```javascript -object React.Children.only(object children) -``` - -`children`에 단 하나의 자식이 있을 때 그 자식을 리턴합니다. 그 밖의 경우에는 예외를 발생시킵니다. diff --git a/docs/ref-02-component-api.ko-KR.md b/docs/ref-02-component-api.ko-KR.md index 6fd0396c2..0576e7dd1 100644 --- a/docs/ref-02-component-api.ko-KR.md +++ b/docs/ref-02-component-api.ko-KR.md @@ -14,14 +14,17 @@ React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로 ### setState ```javascript -void setState(function|object nextState[, function callback]) +void setState( + function|object nextState, + [function callback] +) ``` -`nextState`를 현재 state에 합칩니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다. +nextState를 현재 state에 얕게(shallow) 병합합니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다. 첫번째 인자는 업데이트를 위한 키를 0개 이상 가진 객체이거나 업데이트를 위한 키들을 포함한 객체를 반환하는 함수(의 state나 props)일 수 있습니다. -객체를 사용하는 간단한 예제입니다... +객체를 사용하는 간단한 예제입니다: ```javascript setState({mykey: '새로운 값'}); @@ -51,7 +54,10 @@ setState(function(previousState, currentProps) { ### replaceState ```javascript -void replaceState(object nextState[, function callback]) +void replaceState( + object nextState, + [function callback] +) ``` `setState()`와 비슷하지만 기존에 존재하는 state 중 nextState에 없는 키는 모두 삭제됩니다. @@ -64,7 +70,9 @@ void replaceState(object nextState[, function callback]) ### forceUpdate ```javascript -void forceUpdate([function callback]) +void forceUpdate( + [function callback] + ) ``` 기본적으로, 컴포넌트의 state나 props가 변경되면, 컴포넌트는 다시 렌더됩니다. 하지만 이런 변경이 묵시적이거나(예를들어 객체의 변경 없이 깊이 있는 데이터만 변경된 경우) `render()` 함수가 다른 값에 의존하는 경우, `forceUpdate()`를 호출해 React에게 `render()`를 다시 실행할 필요가 있다고 알릴 수 있습니다. @@ -95,7 +103,7 @@ DOMElement getDOMNode() boolean isMounted() ``` -`isMounted()`는 컴포넌트가 DOM에 렌더링되었으면 true를, 아니면 false를 리턴합니다. 비동기적으로 `setState()`나 `forceUpdate()`를 호출할 때 이 메소드를 사용하여 오류를 방지할 수 있습니다. +`isMounted()`는 컴포넌트가 DOM에 렌더링되었으면 `true`를, 아니면 `false`를 리턴합니다. 비동기적으로 `setState()`나 `forceUpdate()`를 호출할 때 이 메소드를 사용하여 오류를 방지할 수 있습니다. > 주의: > @@ -105,7 +113,10 @@ boolean isMounted() ### setProps ```javascript -void setProps(object nextProps[, function callback]) +void setProps( + object nextProps, + [function callback] +) ``` 외부 JavaScript 애플리케이션과 연동하는 경우 `ReactDOM.render()`로 렌더링된 React 컴포넌트에 변경을 알리고 싶을 때가 있습니다. @@ -124,7 +135,10 @@ void setProps(object nextProps[, function callback]) ### replaceProps ```javascript -void replaceProps(object nextProps[, function callback]) +void replaceProps( + object nextProps, + function callback] +) ``` `setProps()`와 비슷하지만 두 객체를 합치는 대신 이전에 존재하던 props를 삭제합니다. diff --git a/docs/ref-03-component-specs.ko-KR.md b/docs/ref-03-component-specs.ko-KR.md index 129680812..266ffc218 100644 --- a/docs/ref-03-component-specs.ko-KR.md +++ b/docs/ref-03-component-specs.ko-KR.md @@ -122,7 +122,7 @@ void componentWillMount() void componentDidMount() ``` -최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `ReactDOM.findDOMNode(this)`로 접근 가능한 DOM 표현을 가집니다. +최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 자식의 refs들에 접근 할 수 있습니다. (기본 DOM 표현에 접근하는 등). 자식 컴포넌트의 `componentDidMount()` 메소드는 부모 컴포넌트보다 먼저 호출됩니다. 다른 JavaScript 프레임워크를 연동하거나, `setTimeout`/`setInterval`로 타이머를 설정하고 AJAX 요청을 보내는 등의 작업을 이 메소드에서 합니다. @@ -130,7 +130,9 @@ void componentDidMount() ### 업데이트 시: componentWillReceiveProps ```javascript -void componentWillReceiveProps(object nextProps) +void componentWillReceiveProps( + object nextProps +) ``` 컴포넌트가 새로운 props를 받을 때 호출됩니다. 이 메소드는 최초 렌더링 시에는 호출되지 않습니다. @@ -154,7 +156,9 @@ componentWillReceiveProps: function(nextProps) { ### 업데이트 시: shouldComponentUpdate ```javascript -boolean shouldComponentUpdate(object nextProps, object nextState) +boolean shouldComponentUpdate( + object nextProps, object nextState +) ``` 새로운 props 또는 state를 받아 렌더링을 하기 전에 호출됩니다. 최초 렌더링 시나 `forceUpdate`를 사용하는 경우에는 호출되지 않습니다. @@ -168,9 +172,9 @@ shouldComponentUpdate: function(nextProps, nextState) { } ``` -`shouldComponentUpdate`가 false를 리턴하면, 다음에 state가 바뀌기 전까지 `render()`가 완전히 호출되지 않고 넘어갑니다. (그리고 `componentWillUpdate`와 `componentDidUpdate` 또한 호출되지 않습니다.) +`shouldComponentUpdate`가 false를 리턴하면, 다음에 state가 바뀌기 전까지 `render()`가 완전히 호출되지 않고 넘어갑니다. `componentWillUpdate`와 `componentDidUpdate` 또한 호출되지 않습니다. -기본적으로 `shouldComponentUpdate`는 항상 true를 리턴합니다. `state`가 제자리에서(in place) 바뀐 경우에 발생하는 파악하기 힘든 버그를 막기 위함입니다. 하지만 `state`가 항상 변경 불가능하도록 주의하고 `render()`에서 `props`와 `state`를 읽기만 하면 이전 props 및 state와 바뀌는 값을 비교하는 `shouldComponentUpdate`를 직접 구현할 수 있습니다. +기본적으로 `shouldComponentUpdate`는 항상 `true`를 리턴합니다. `state`가 제자리에서(in place) 바뀐 경우에 발생하는 파악하기 힘든 버그를 막기 위함입니다. 하지만 `state`가 항상 변경 불가능하도록 주의하고 `render()`에서 `props`와 `state`를 읽기만 하면 이전 props 및 state와 바뀌는 값을 비교하는 `shouldComponentUpdate`를 직접 구현할 수 있습니다. 성능에 병목이 있다면, 특히 컴포넌트가 매우 많은 경우 `shouldComponentUpdate`를 사용하여 앱을 빠르게 만들 수 있습니다. @@ -178,7 +182,9 @@ shouldComponentUpdate: function(nextProps, nextState) { ### 업데이트 시: componentWillUpdate ```javascript -void componentWillUpdate(object nextProps, object nextState) +void componentWillUpdate( + object nextProps, object nextState +) ``` 새로운 props나 state를 받았을 때 렌더링 직전에 호출됩니다. 최초 렌더링 시에는 호출되지 않습니다. @@ -193,7 +199,9 @@ void componentWillUpdate(object nextProps, object nextState) ### 업데이트 시: componentDidUpdate ```javascript -void componentDidUpdate(object prevProps, object prevState) +void componentDidUpdate( + object prevProps, object prevState +) ``` 컴포넌트의 업데이트가 DOM에 반영된 직후에 호출됩니다. 최초 렌더링 시에는 호출되지 않습니다. diff --git a/docs/ref-04-tags-and-attributes.ko-KR.md b/docs/ref-04-tags-and-attributes.ko-KR.md index 782d67503..4b93ff3cb 100644 --- a/docs/ref-04-tags-and-attributes.ko-KR.md +++ b/docs/ref-04-tags-and-attributes.ko-KR.md @@ -8,7 +8,7 @@ next: events-ko-KR.html ## 지원되는 태그 -React는 모든 공통 엘리먼트를 지원하려 합니다. 필요한 엘리먼트가 목록에 없다면, 이슈로 등록해 주세요. +React는 모든 공통 엘리먼트를 지원하려 합니다. 필요한 엘리먼트가 목록에 없다면, [이슈로 등록](https://github.com/facebook/react/issues/new)해 주세요. ### HTML 엘리먼트 @@ -53,17 +53,17 @@ React는 모든 `data-*`, `aria-*` 어트리뷰트와 밑에 있는 모든 어 ``` accept acceptCharset accessKey action allowFullScreen allowTransparency alt -async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet challenge -checked classID className colSpan cols content contentEditable contextMenu controls -coords crossOrigin data dateTime defer dir disabled download draggable encType -form formAction formEncType formMethod formNoValidate formTarget frameBorder +async autoComplete autoFocus autoPlay capture cellPadding cellSpacing charSet +challenge checked classID className cols colSpan content contentEditable contextMenu +controls coords crossOrigin data dateTime defer dir disabled download draggable +encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode keyParams keyType label lang list loop low manifest marginHeight marginWidth max -maxLength media mediaGroup method min multiple muted name noValidate open +maxLength media mediaGroup method min minlength multiple muted name noValidate open optimum pattern placeholder poster preload radioGroup readOnly rel required role -rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes +rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcSet start step style summary tabIndex target title -type useMap value width wmode +type useMap value width wmode wrap ``` 덧붙여, 이런 비표준 어트리뷰트도 지원됩니다. @@ -72,15 +72,19 @@ type useMap value width wmode - [오픈 그래프](http://ogp.me/) 메타 태그를 위한 `property`. - [HTML5 마이크로데이터](http://schema.org/docs/gs.html)를 위한 `itemProp itemScope itemType itemRef itemID`. - 인터넷 익스플로어를 위한 `unselectable`. +- WebKit/Blink의 `search` 타입 input 필드를 위한 `results autoSave` 컴포넌트에 직접 HTML 문자열을 넣을 때 사용하는, React 전용 어트리뷰트 `dangerouslySetInnerHTML`([자세한 정보는 여기](/react/docs/special-non-dom-attributes-ko-KR.html))도 있습니다. ### SVG 어트리뷰트 ``` -clipPath cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy -gradientTransform gradientUnits markerEnd markerMid markerStart offset opacity -patternContentUnits patternUnits points preserveAspectRatio r rx ry -spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap -strokeOpacity strokeWidth textAnchor transform version viewBox x1 x2 x y1 y2 y +clipPath cx cy d dx dy fill fillOpacity fontFamily +fontSize fx fy gradientTransform gradientUnits markerEnd +markerMid markerStart offset opacity patternContentUnits +patternUnits points preserveAspectRatio r rx ry spreadMethod +stopColor stopOpacity stroke strokeDasharray strokeLinecap +strokeOpacity strokeWidth textAnchor transform version +viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole +xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y ``` diff --git a/docs/ref-05-events.ko-KR.md b/docs/ref-05-events.ko-KR.md index f05a21ede..b727bb90c 100644 --- a/docs/ref-05-events.ko-KR.md +++ b/docs/ref-05-events.ko-KR.md @@ -31,8 +31,33 @@ string type > 주의: > -> v0.12 시점에서, 이벤트 핸들러에서 `false` 를 리턴하는 것은 더 이상 이벤트의 전달(propagation)을 멈추지 않습니다. 대신, `e.stopPropagation()`나 `e.preventDefault()`로 적절히 수동으로 트리거해야 합니다. +> v0.14 시점에서, 이벤트 핸들러에서 `false` 를 리턴하는 것은 더 이상 이벤트의 전달(propagation)을 멈추지 않습니다. 대신, `e.stopPropagation()`나 `e.preventDefault()`로 적절히 수동으로 트리거해야 합니다. +## 이벤트 풀링 + +`SyntheticEvent`는 풀링됩니다. 이는 `SyntheticEvent` 객체가 재사용될 것이며 이벤트 콜백이 호출된 후 모든 프로퍼티가 null 값을 갖게 된다는 것을 뜻합니다. +이는 성능을 위한 동작입니다. +이 때문에, 비동기 방식으로는 이벤트에 접근할 수 없습니다. + +```javascript +function onClick(event) { + console.log(event); // => null이 된 객체. + console.log(event.type); // => "click" + var eventType = event.type; // => "click" + + setTimeout(function() { + console.log(event.type); // => null + console.log(eventType); // => "click" + }, 0); + + this.setState({clickEvent: event}); // 작동하지 않습니다. this.state.clickEvent 는 null값들만을 갖고 있습니다. + this.setState({eventType: event.type}); // 여전히 이벤트 프로퍼티를 내보낼 수 있습니다. +} +``` + +> 주의: +> +> 만약 비동기 방식으로 이벤트 프로퍼티에 접근하길 원한다면, 이벤트의 `event.persist()`를 호출해야 합니다, 이는 풀로부터 통합적인 이벤트를 제거하고 이벤트에 대한 참조는 사용자의 코드에 의해 유지 될 수 있도록 합니다. ## 지원되는 이벤트 @@ -56,6 +81,22 @@ DOMDataTransfer clipboardData ``` +### Composition Events + +이벤트 이름: + +``` +onCompositionEnd onCompositionStart onCompositionUpdate +``` + +프로퍼티: + +```javascript +string data + +``` + + ### 키보드 이벤트 이벤트 이름: @@ -96,6 +137,7 @@ onFocus onBlur DOMEventTarget relatedTarget ``` +이 포커스 이벤트는 폼 엘리먼트뿐만 아니라 모든 React DOM 엘리먼트에서 작동합니다. ### 폼 이벤트 @@ -114,11 +156,12 @@ onChange 이벤트에 대한 더 자세한 정보는 [폼](/react/docs/forms-ko- 이벤트 이름: ``` -onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave +onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit +onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -`onMouseEnter`와 `onMouseLeave` 이벤트는 평범하게 일어나는(bubbling) 대신 입력된 컴포넌트에 남겨지도록 컴포넌트에서 전달되고 캡쳐 단계가 없습니다. +`onMouseEnter`와 `onMouseLeave` 이벤트는 평범하게 일어나는(bubbling) 대신 입력된 엘리먼트에 남겨지도록 엘리먼트에서 전달되고 캡쳐 단계가 없습니다. 프로퍼티: @@ -140,6 +183,15 @@ boolean shiftKey ``` +### 셀렉션 이벤트 + +이벤트 이름: + +``` +onSelect +``` + + ### 터치 이벤트 이벤트 이름: @@ -202,3 +254,11 @@ number deltaZ ``` onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting ``` + +### 이미지 이벤트 + +이벤트 이름: + +``` +onLoad onError +``` diff --git a/docs/ref-09-glossary.ko-KR.md b/docs/ref-09-glossary.ko-KR.md index d7c944a48..ad27e6e87 100644 --- a/docs/ref-09-glossary.ko-KR.md +++ b/docs/ref-09-glossary.ko-KR.md @@ -44,7 +44,7 @@ var root =
    ReactDOM.render(root, document.getElementById('example')); ``` -__팩토리__ +### 팩토리 `ReactElement` 팩토리는 그저 특정한 `type` 프로퍼티를 가지는 `ReactElement`를 만들어주는 함수입니다. React에는 팩토리를 만드는 헬퍼가 내장되어 있습니다. 그 함수는 사실상 다음과 같습니다: @@ -105,7 +105,7 @@ var MyComponent = React.createClass({ var component = new MyComponent(props); // 절대 하지 마세요. ``` -테스트 목적이 아니라면 __절대__ 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다. +테스트 목적이 아니라면 *절대* 이 생성자를 직접 호출하지 마십시오. React가 알아서 호출해줍니다. 대신 `ReactComponent` 클래스를 `createElement`에 넘겨 `ReactElement`를 받을 수 있습니다. @@ -140,13 +140,13 @@ componentA === componentB; // true ## 형식 타입 정의 -__진입점__ +### 진입점 ``` ReactDOM.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent; ``` -__노드와 엘리먼트__ +### 노드와 엘리먼트 ``` type ReactNode = ReactElement | ReactFragment | ReactText; @@ -180,7 +180,7 @@ type ReactText = string | number; type ReactEmpty = null | undefined | boolean; ``` -__클래스와 컴포넌트__ +### 클래스와 컴포넌트 ``` type ReactClass = (TProps) => ReactComponent; diff --git a/docs/tutorial.ko-KR.md b/docs/tutorial.ko-KR.md index c8e14f326..83c1b0059 100644 --- a/docs/tutorial.ko-KR.md +++ b/docs/tutorial.ko-KR.md @@ -26,21 +26,21 @@ next: thinking-in-react-ko-KR.html ### 서버 구동하기 -이 튜토리얼을 시작할 때 필요한 건 아니지만, 나중에 실행 중인 서버에 `POST` 요청을 하는 기능을 추가하게 될 것입니다. 서버를 구성하는 것이 익숙하다면, 본인이 편한 방식대로 서버를 구성해 주세요. 서버사이드에 대한 고민없이 React의 학습 그 자체에 집중하고 싶은 분들을 위해서, 몇 가지 언어로 간단한 서버코드를 작성해 놓았습니다 - JavaScript (Node.js), Python, Ruby, Go, PHP 버전이 있고, GitHub에서 찾아보실 수 있습니다. [소스를 확인](https://github.com/reactjs/react-tutorial/)하거나 [zip 파일을 다운로드](https://github.com/reactjs/react-tutorial/archive/master.zip)하고 시작하세요. +이 튜토리얼을 시작하기 위해, 서버를 구동할 필요가 있습니다. 이 서버는 순수하게 우리가 받고 저장할 데이터의 API 엔드포인트로써만 사용합니다. 이를 가능한한 쉽게하기 위해, 필요한 것만 제공하는 간단한 서버를 몇가지 스크립트 언어로 만들었습니다. **시작하는데 필요한 모든 것이 들어있는 [소스](https://github.com/reactjs/react-tutorial/)를 보시거나 [zip 파일](https://github.com/reactjs/react-tutorial/archive/master.zip)을 다운로드 할 수 있습니다.** -튜토리얼을 시작하려면, `public/index.html`을 열고 바로 시작하세요. +단순하게 하기위해, 서버는 `JSON` 파일을 데이터베이스로 사용합니다. 프로덕션에서 사용할 수는 없지만 이렇게 하면 API를 사용할 때 시뮬레이션이 단순해집니다. 서버가 시작되면, API 엔드포인트를 제공하고 필요한 정적 페이지를 서빙합니다. ### 시작하기 -이 튜토리얼에서는 CDN에 있는 미리 빌드된 JavaScript 파일들을 사용합니다. 선호하는 에디터에서 `public/index.html`을 열어, 아래의 내용을 채우세요: +이 튜토리얼에서는 가능한한 간단하게 만들겠습니다. 위에서 언급된 서버 패키지에 우리가 작업할 HTML 파일 포함되어 있습니다. 편한 편집기에서 `public/index.html`를 여세요. 이는 이런 내용이어야 합니다.(아마 조금 다를 수 있습니다만, 여기에 나중에 ` @@ -48,14 +48,16 @@ next: thinking-in-react-ko-KR.html
    + ``` -다음 진행을 위해, 위의 스크립트 태그안에 JavaScript 코드를 작성합니다. 각 단계를 추가한 다음 index.html 파일을 브라우저에서 열어서 진행을 확인하세요. +다음 진행을 위해, 위의 스크립트 태그안에 JavaScript 코드를 작성합니다. (이 튜토리얼에서는) 진보된 라이브 리로드가 없기 때문에, 수정 사항을 저장한 다음에는 브라우저를 새로고침해서 확인해야 합니다. 서버를 시작한 다음 브라우저에서 `http://localhost:3000`를 열어 따라해 보세요. 아무런 수정도 하지 않았다면, 최초 로드시 우리가 만들 제품의 완성품을 확인할 수 있을 것입니다. 작업할 준비가 되면, 이전의 ` @@ -258,17 +262,21 @@ var Comment = React.createClass({ React는 이런 식으로 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)을 예방합니다. 우회할 방법이 있긴 하지만 프레임워크는 사용하지 않도록 경고하고 있습니다: -```javascript{4,10} +```javascript{4,14} // tutorial7.js var Comment = React.createClass({ - render: function() { + rawMarkup: function() { var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); + return { __html: rawMarkup }; + }, + + render: function() { return (

    {this.props.author}

    - +
    ); } @@ -344,13 +352,15 @@ var CommentList = React.createClass({ ```javascript{3} // tutorial11.js ReactDOM.render( - , + , document.getElementById('content') ); ``` 이 컴포넌트는 이전 것과 다르게, 스스로 다시 렌더링해야 합니다. 컴포넌트는 서버에서 요청이 들어올때까지는 아무 데이터도 가지고 있지 않다가, 특정한 시점에서 새로운 댓글을 렌더할 필요가 있을 것입니다. +주의: 이 단계에서 코드는 아직 동작하지 않습니다. + ### 반응적 state 지금까지, 각각의 컴포넌트는 props를 기반으로 한번 렌더되었습니다. `props`는 불변성을 갖습니다: 그것들은 부모에서 전달되어 부모에게 "소유" 되어 있습니다. 컴포넌트에 상호작용을 구현하기 위해서, 가변성을 갖는 **state**를 소개합니다. `this.state`는 컴포넌트에 한정(private)되며 `this.setState()`를 통해 변경할 수 있습니다. state가 업데이트 되면, 컴포넌트는 자신을 스스로 다시 렌더링합니다. @@ -381,20 +391,15 @@ var CommentBox = React.createClass({ ### state 업데이트하기 -컴포넌트의 최초 생성 시에, 서버에서 GET 방식으로 JSON을 넘겨받아 최신의 데이터가 state에 반영되길 원했습니다. 실제 애플리케이션에선 이것이 동적인 엔드포인트이지만, 이 예제에서는 단순히하기 위해 comments의 배열이 담긴 정적 JSON 파일 `public/comments.json`을 사용하겠습니다. +컴포넌트의 최초 생성 시에, 서버에서 GET 방식으로 JSON을 넘겨받아 최신의 데이터가 state에 반영되길 원했습니다. jQuery를 사용해 서버에 비동기 요청을 만들어 필요한 데이터를 빨리 가져올 수 있게 하겠습니다. 이런 식입니다. -```javascript -// tutorial13.json +```json [ {"author": "Pete Hunt", "text": "댓글입니다"}, {"author": "Jordan Walke", "text": "*또 다른* 댓글입니다"} ] ``` -서버에 비동기 요청을 위해 jQuery를 사용합니다. - -주의: 우리의 앱이 AJAX 애플리케이션으로 변화하고 있기 때문에, 이제 파일 시스템의 파일을 참조하는 대신 웹서버를 사용하도록 앱을 개발해야 합니다. [위에서 언급한 바와 같이](#running-a-server), 우리는 튜토리얼의 나머지 부분에 필요한 기능을 제공하는 서버를 몇 가지 준비해 놓았습니다. [GitHub에 올려놓았으니](https://github.com/reactjs/react-tutorial) 확인해 보세요. - ```javascript{6-18} // tutorial13.js var CommentBox = React.createClass({ @@ -463,13 +468,13 @@ var CommentBox = React.createClass({ }); ReactDOM.render( - , + , document.getElementById('content') ); ``` -우리가 여기서 한것은 AJAX 호출을 별도의 메소드로 분리하고 컴포넌트가 처음 로드된 시점부터 2초 간격으로 계속 호출되도록 한 것입니다. 브라우저에서 직접 돌려보고 `comments.json`파일을 수정해보세요; 2초 간격으로 변화되는 모습이 보일 것입니다! +우리가 여기서 한것은 AJAX 호출을 별도의 메소드로 분리하고 컴포넌트가 처음 로드된 시점부터 2초 간격으로 계속 호출되도록 한 것입니다. 브라우저에서 직접 돌려보고 `comments.json` 파일(서버의 같은 디렉토리에 있습니다)을 수정해보세요. 2초 간격으로 변화되는 모습이 보일 것입니다! ### 새로운 댓글 추가하기 @@ -497,14 +502,14 @@ var CommentForm = React.createClass({ var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - var author = ReactDOM.findDOMNode(this.refs.author).value.trim(); - var text = ReactDOM.findDOMNode(this.refs.text).value.trim(); + var author = this.refs.author.value.trim(); + var text = this.refs.text.value.trim(); if (!text || !author) { return; } // TODO: 서버에 요청을 전송합니다 - ReactDOM.findDOMNode(this.refs.author).value = ''; - ReactDOM.findDOMNode(this.refs.text).value = ''; + this.refs.author.value = ''; + this.refs.text.value = ''; return; }, render: function() { @@ -527,7 +532,7 @@ React는 카멜케이스 네이밍 컨벤션으로 컴포넌트에 이벤트 핸 ##### Refs -우리는 자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, 컴포넌트를 참조하기 위해 `this.refs`를 사용합니다. 고유한(native) 브라우저 DOM 엘리먼트를 얻기 위해 `ReactDOM.findDOMNode(component)`를 호출할 수 있습니다. +자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, DOM 노드를 참조하기 위해 `this.refs`를 사용합니다. ##### props으로 콜백 처리하기 @@ -580,14 +585,14 @@ var CommentBox = React.createClass({ var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - var author = ReactDOM.findDOMNode(this.refs.author).value.trim(); - var text = ReactDOM.findDOMNode(this.refs.text).value.trim(); + var author = this.refs.author.value.trim(); + var text = this.refs.text.value.trim(); if (!text || !author) { return; } this.props.onCommentSubmit({author: author, text: text}); - ReactDOM.findDOMNode(this.refs.author).value = ''; - ReactDOM.findDOMNode(this.refs.text).value = ''; + this.refs.author.value = ''; + this.refs.text.value = ''; return; }, render: function() { diff --git a/docs/videos.ko-KR.md b/docs/videos.ko-KR.md index 5b4766f4a..de9b46007 100644 --- a/docs/videos.ko-KR.md +++ b/docs/videos.ko-KR.md @@ -110,7 +110,7 @@ By [Tom Occhino](http://tomocchino.com/), [Jordan Walke](https://github.com/jord ### Backbone + React + Middleman Screencast -Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 병합하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/) +Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 연동하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/) * * * diff --git a/tips/03-if-else-in-JSX.ko-KR.md b/tips/03-if-else-in-JSX.ko-KR.md index 48fd4fe67..ca5da4b89 100644 --- a/tips/03-if-else-in-JSX.ko-KR.md +++ b/tips/03-if-else-in-JSX.ko-KR.md @@ -78,4 +78,4 @@ return ( > > 위의 예제에 있는 ES6 [화살표 함수](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)는 `this`의 값을 구문적으로 바인드하기위해 사용되었습니다. -[JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요. +[Babel REPL](https://babeljs.io/repl/)로 지금 바로 사용해보세요. diff --git a/tips/07-children-props-type.ko-KR.md b/tips/07-children-props-type.ko-KR.md index 0be0a295d..ee8a3d48b 100644 --- a/tips/07-children-props-type.ko-KR.md +++ b/tips/07-children-props-type.ko-KR.md @@ -26,7 +26,7 @@ ReactDOM.render( ); ``` -하지만 자식이 하나만 있는 경우, `this.props.children`는 _배열 래퍼(wrapper)없이_ 싱글 자식 컴포넌트가 됩니다. 이렇게 함으로써 배열 할당을 줄일 수 있습니다. +하지만 자식이 하나만 있는 경우, `this.props.children`는 _배열 래퍼(wrapper)없이_ 싱글 자식 컴포넌트가 됩니다. 이렇게 함으로써 배열 할당을 줄일 수 있습니다. ```js var GenericWrapper = React.createClass({ diff --git a/tips/15-expose-component-functions.ko-KR.md b/tips/15-expose-component-functions.ko-KR.md index 1406b769c..0648961b1 100644 --- a/tips/15-expose-component-functions.ko-KR.md +++ b/tips/15-expose-component-functions.ko-KR.md @@ -4,7 +4,7 @@ title: 컴포넌트 함수 드러내기 layout: tips permalink: expose-component-functions-ko-KR.html prev: communicate-between-components-ko-KR.html -next: references-to-components-ko-KR.html +next: children-undefined-ko-KR.html --- [컴포넌트간의 통신](/react/tips/communicate-between-components-ko-KR.html)을 위한 (일반적이지 않은) 또다른 방법이 있습니다: 단순히 부모의 호출을 위해 자식 컴포넌트의 메소드를 노출하는 겁니다. diff --git a/tips/16-references-to-components.ko-KR.md b/tips/16-references-to-components.ko-KR.md index 55d4b155a..3e9058a98 100644 --- a/tips/16-references-to-components.ko-KR.md +++ b/tips/16-references-to-components.ko-KR.md @@ -7,22 +7,4 @@ prev: expose-component-functions-ko-KR.html next: children-undefined-ko-KR.html --- -애플리케이션의 일부에서만 React 컴포넌트를 사용중이거나 코드를 React로 전환하고 있다면, 컴포넌트의 참조를 보존할 필요가 있을 것입니다. `ReactDOM.render`는 마운트된 컴포넌트의 참조를 반환합니다: - -```js -var myComponent = ReactDOM.render(, myContainer); -``` - -명심하세요, JSX는 컴포넌트 인스턴스를 반환하지 않습니다! 단지 마운트된 컴포넌트가 어떻게 보일지 알려주는 간단한 서술인 **ReactElement**일 뿐입니다. - -```js -var myComponentElement = ; // ReactElement일 뿐입니다. - -// 코드들이 여기 위치하게 됩니다... - -var myComponentInstance = ReactDOM.render(myComponentElement, myContainer); -``` - -> 주의: -> -> 이는 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `prop`과 `state`가 자식컴포넌트와의 통신을 제어하며, [refs](/react/docs/more-about-refs-ko-KR.html)를 통해서만 컴포넌트를 참조할 수 있습니다. +이 페이지는 이동되었습니다. [refs](/react/docs/more-about-refs-ko-KR.html) diff --git a/tips/17-children-undefined.ko-KR.md b/tips/17-children-undefined.ko-KR.md index 38204252b..8b795734d 100644 --- a/tips/17-children-undefined.ko-KR.md +++ b/tips/17-children-undefined.ko-KR.md @@ -3,7 +3,7 @@ id: children-undefined-ko-KR title: 정의되지 않은 this.props.children layout: tips permalink: children-undefined-ko-KR.html -prev: references-to-components-ko-KR.html +prev: expose-component-functions-ko-KR.html next: use-react-with-other-libraries-ko-KR.html ---