인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포턴트 등)을 잘 정의된 인터페이스의 재사용가능한 컴포턴트로 분해합니다. 그런 방법으로 다음에 어떤 UI를 구축할 필요가 있을 때 훨씬 적은 코드로 만들 수 있는데, 즉 더 빠른 개발 시간, 더 적은 버그, 그리고 더 적은 용량으로 달서할 수 있다는 뜻입니다.
인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
## Prop 검증
앱을 개발할 때 컴포넌트들이 정확히 사용되었는지 확인하는게 도움이 됩니다. 저희는 이것을 `propTypes`를 명시하는 것으로 제공합니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 검증자(validator)의 범위를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발중일 때만 확인하기를 권합니다. 각각의 검증자들을 명시하는지에 대한 예제가 있습니다:
앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
```javascript
React.createClass({
propTypes: {
// 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
// 기본적으로 이것들은 모두 옵셔널입니다.
// 기본적으로 이것들은 모두 선택적입니다.
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
@ -24,14 +25,15 @@ React.createClass({
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소, 그리고 이것들을 포함하는 배열
// 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
// 이것들을 포함하는 배열이나 엘리먼트
optionalNode: React.PropTypes.node,
// React 엘리먼트
optionalElement: React.PropTypes.element,
// 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof 연산자를
// 사용합니다.
// 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof
React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다:
React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
```javascript
var ComponentWithDefaultProps = React.createClass({
@ -92,16 +94,16 @@ var ComponentWithDefaultProps = React.createClass({
});
```
`getDefaultProps()`의 결과값은 캐싱이 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록해주는데 사용됩니다. 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용하도록 해줍니다.
`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.
## Prop 전달하기: 기본
## Prop 전달하기: 단축
React 컴포넌트의 흔한 타입 중 하나는 단순히 기본 HTML을 확장하는 것입니다. 타이핑을 아끼기 위해 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 때가 생길 것입니다. JSX의 _spread_ 문법을 사용해 이렇게 만들 수 있습니다:
React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
`React.PropTypes.element`을 통해 컴포넌트에 자식을 단 하나만 보내도록 명시할 수 있습니다.
`React.PropTypes.element`을 통해 컴포넌트에 한 자식만 보내도록 명시할 수 있습니다.
```javascript
var MyComponent = React.createClass({
@ -137,9 +139,9 @@ var MyComponent = React.createClass({
## 믹스인
컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 기능이 약간 겹치는 너무 다른 컴포넌트가 있을 수 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 이 문제를 해결하기 위해 `mixins`를 제공합니다.
컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
한가지 흔한 경우는 주기적으로 업데이트되는 컴포넌트입니다. `setInterval()`을 사용하면 쉽지만, 더이상 원치 않을 때 메모리를 아끼기 위해 주기를 취소하는 것은 중요합니다. React는 컴포넌트가 막 생성될 때 혹은 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
```javascript
var SetIntervalMixin = {
@ -160,7 +162,7 @@ var TickTock = React.createClass({
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); 믹스인에 있는 메소드를 호출
this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
@ -180,4 +182,4 @@ React.render(
);
```
믹스인의 괜찮은 점은 컴포넌트가 같은 생명주기 메소드를 사용할 때(예를 들어, 컴포넌트가 사라질 때 뭔가 정리하려는 믹스인들이 많이 있다면) 모든 생명주기 메소드들이 실행되는게 보장된다. 믹스인에 정의된 메소드들은 믹스인이 나열된 순서대로 컴포넌트의 메소드 호출 다음에 실행된다.
믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다.
@ -71,7 +71,7 @@ React의 많은 뛰어난 점들 중 하나는 생각을 하면서 애플리케
이 단계의 결과, 자료 모델을 그리는 재활용 가능한 컴포넌트의 라이브러리를 갖게 되었습니다. 정적버전 이후로 컴포넌트들은 오직 `render()` 메소드만 갖고 있습니다. 계층구조상 가장 위의 컴포넌트 (`FilterableProductTable`)은 자료 모델을 prop으로 취할 것입니다. 자료 모델이 변했을 때, `React.render()`를 다시 부르면 업데이트 됩니다. 어떻게 UI가 업데이트 되는지 참 알기 쉽습니다. 자료가 바뀌어도 처리해야 할 복잡한 일이 아무것도 없습니다. React의 **단일 방향 자료 흐름** (혹은 *단일방향 바인딩*)이 모든것을 모듈식으로, 추론하기 쉽게, 그리고 빠르게 유지해줍니다.
이 단계를 진행하는 데에 도움이 필요하시다면, [React 문서](http://facebook.github.io/react/docs/)를 참조하세요.
이 단계를 진행하는 데에 도움이 필요하시다면, [React 문서](/react/docs/getting-started-ko-KR.html)를 참조하세요.
Shim Won
10 years ago
Jay Jaeho Lee