aae74da792 · samitouri/QOS-React-2

@@ -0,0 +1,203 @@

1 +---

2 +id: jsx-in-depth-ko-KR

3 +title: JSX 깊이보기

4 +permalink: jsx-in-depth.ko-KR.html

5 +prev: displaying-data.ko-KR.html

6 +next: jsx-spread.ko-KR.html

7 +---

8 +

9 +[JSX](http://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.

10 +

11 +## 왜 JSX인가?

12 +

13 +React를 위해 꼭 JSX를 사용할 필요는 없고, 그냥 일반 JS를 사용할 수도 있습니만 JSX를 사용하기를 추천합니다. 왜냐하면, 어트리뷰트를 가진 트리 구조로 정의할 수 있는 간결하고 익숙한 문법이기 때문입니다.

14 +

15 +이것은 디자이너 같은 케쥬얼 개발자에게 더 익숙합니다.

16 +

17 +XML에는 여닫는 태그의 장점이 있습니다. 태그는 큰 트리일 때 함수 호출이나 객체 리터럴보다 읽기 쉬워 집니다.

18 +

19 +JSX는 JavaScript의 시맨틱을 변경하지 않습니다.

20 +

21 +## HTML 태그 vs. React 컴포넌트

22 +

23 +React는 렌더 HTML 태그(문자열)이나 React 컴포넌트(클래스)일 수 있습니다.

24 +

25 +HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세요.

26 +

27 +```javascript

28 +var myDivElement = <div className="foo" />;

29 +React.render(myDivElement, document.body);

30 +```

31 +

32 +React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.

33 +

34 +```javascript

35 +var MyComponent = React.createClass({/*...*/});

36 +var myElement = <MyComponent someProperty={true} />;

37 +React.render(myElement, document.body);

38 +```

39 +

40 +React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.

41 +

42 +> 주의:

43 +>

44 +> JSX가 JavaScript기 때문에, `class`, `for`같은 식별자는 XML 어트리뷰트 이름으로

45 +> 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은

46 +> DOM 프로퍼티 이름을 기대합니다.

47 +

48 +## 변환

49 +

50 +React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다.

51 +

52 +```javascript

53 +var Nav;

54 +// 입력 (JSX):

55 +var app = <Nav color="blue" />;

56 +// 출력 (JS):

57 +var app = React.createElement(Nav, {color:"blue"});

58 +```

59 +

60 +`<Nav />`를 사용하려면, `Nav`변수는 스코프에 있어야 합니다.

61 +

62 +JSX에서는 XML 구문으로 자식을 지정할 수도 있습니다.

63 +

64 +```javascript

65 +var Nav, Profile;

66 +// 입력 (JSX):

67 +var app = <Nav color="blue"><Profile>click</Profile></Nav>;

68 +// 출력 (JS):

69 +var app = React.createElement(

70 + Nav,

71 + {color:"blue"},

72 + React.createElement(Profile, null, "click")

73 +);

74 +```

75 +

76 +[JSX 컴파일러](/react/jsx-compiler.html)를 사용해보면 JSX에서 어떻게 네이티브

77 +JavaScript로 변환하는지(desugars) 볼 수 있고,

78 +[HTML에서 JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해

79 +줍니다.

80 +

81 +JSX를 사용 하시려면, [시작하기](/react/docs/getting-started.html) 가이드에서 어떻게 컴파일을 설정하는지 보실 수 있습니다.

82 +

83 +> 주의:

84 +>

85 +> JSX 표현식은 언제나 ReactElement로 평가됩니다. 실제 구현의 세부사항은 많이

86 +> 다를 수 있습니다. 최적화 모드는ReactElement를 `React.createElement`에서 검증

87 +> 코드를 우회하는 객체 리터럴로 ReactElement를 인라인으로 만들 수 있습니다.

88 +

89 +## 네임스페이스를 사용한 컴포넌트

90 +

91 +자식을 많이 가지는 컴포넌트를 만들거나, 재사용 가능한 컴포넌트 카테고리(`Form` 카테고리처럼)가 있는 애플리케이션을 만든다면, 간단하고 쉽게 하기 위해, *컴포넌트에서 네임스페이스*를 사용할 수 있습니다. 예를 들어, 이렇게 해야 할 일이 있다면

92 +

93 +```javascript

94 +var Form = MyFormComponent;

95 +var FormRow = Form.Row;

96 +var FormLabel = Form.Label;

97 +var FormInput = Form.Input;

98 +

99 +var App = (

100 + <Form>

101 + <FormRow>

102 + <FormLabel />

103 + <FormInput />

104 + </FormRow>

105 + </Form>

106 +);

107 +```

108 +

109 +위에 변수를 한 묶음 선언하는 대신에, 다른 컴포넌트를 어트리뷰트로 가지는 하나의 컴포넌트만 쓸 수 있습니다.

110 +

111 +```javascript

112 +var Form = MyFormComponent;

113 +

114 +var App = (

115 + <Form>

116 + <Form.Row>

117 + <Form.Label />

118 + <Form.Input />

119 + </Form.Row>

120 + </Form>

121 +);

122 +```

123 +

124 +이렇게 하려면, *"sub-components"*를 메인 컴포넌트의 어트리뷰트로 만들 필요가 있습니다.

125 +

126 +```javascript

127 +var MyFormComponent = React.createClass({ ... });

128 +

129 +MyFormComponent.Row = React.createClass({ ... });

130 +MyFormComponent.Label = React.createClass({ ... });

131 +MyFormComponent.Input = React.createClass({ ... });

132 +```

133 +

134 +코드를 컴파일할 때 JSX는 이것을 제대로 처리해 줍니다.

135 +

136 +```javascript

137 +var App = (

138 + React.createElement(Form, null,

139 + React.createElement(Form.Row, null,

140 + React.createElement(Form.Label, null),

141 + React.createElement(Form.Input, null)

142 + )

143 + )

144 +);

145 +```

146 +

147 +> 주의:

148 +>

149 +> 이 기능은 [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.

150 +

151 +## JavaScript 표현식

152 +

153 +### 어트리뷰트 표현식

154 +

155 +JavaScript 표현식을 어트리뷰트 값으로 사용하려면, 표현식을 쌍따옴표(`""`)대신

156 +중괄호(`{}`)로 감싸야 합니다.

157 +

158 +```javascript

159 +// 입력 (JSX):

160 +var person = <Person name={window.isLoggedIn ? window.name : ''} />;

161 +// 출력 (JS):

162 +var person = React.createElement(

163 + Person,

164 + {name: window.isLoggedIn ? window.name : ''}

165 +);

166 +```

167 +

168 +### 자식 표현식

169 +

170 +비슷하게, JavaScript 표현식은 자식을 표현하는 데 사용할 수 있습니다.

171 +

172 +```javascript

173 +// 입력 (JSX):

174 +var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

175 +// 출력 (JS):

176 +var content = React.createElement(

177 + Container,

178 + null,

179 + window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)

180 +);

181 +```

182 +

183 +### 주석

184 +

185 +JSX에 주석을 넣기는 쉽습니다. 그냥 JS 표현식과 같습니다. 그냥 태그의 자식 섹션에서만 조심하시면 됩니다. 이럴 땐 주석 주변에 `{}`를 감싸야 합니다.

186 +

187 +```javascript

188 +var content = (

189 + <Nav>

190 + {/* 자식 주석, {}로 감싼다 */}

191 + <Person

192 + /* 여러

193 + 줄

194 + 주석 */

195 + name={window.isLoggedIn ? window.name : ''} // 줄 끝부분 주석

196 + />

197 + </Nav>

198 +);

199 +```

200 +

201 +> 주의:

202 +>

203 +> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/react/docs/jsx-gotchas.html)를 보세요.

Translate 02.1 to Korean