Skip to content

Commit 30a0a4c

Browse files
lumirlumirlumirlumir
committed
docs: update select.md 
1 parent 94b87f8 commit 30a0a4c

File tree

1 file changed

+23
-23
lines changed
  • src/content/reference/react-dom/components

1 file changed

+23
-23
lines changed

‎src/content/reference/react-dom/components/select.md‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: "<select>"
44

55
<Intro>
66

7-
[`<select>` 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)는 옵션을 포함하는 select box를 렌더링합니다.
7+
[내장 브라우저 `<select>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)는 옵션을 포함하는 select box를 렌더링합니다.
88

99
```js
1010
<select>
@@ -23,7 +23,7 @@ title: "<select>"
2323

2424
### `<select>` {/*select*/}
2525

26-
select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)를 렌더링해야 합니다.
26+
select box를 표시하려면 [내장 브라우저 `<select>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)를 렌더링합니다.
2727

2828
```js
2929
<select>
@@ -32,25 +32,25 @@ select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer
3232
</select>
3333
```
3434

35-
[아래 더 많은 예시가 있습니다.](#usage)
35+
[아래 예시를 참고하세요.](#usage)
3636

3737
#### Props {/*props*/}
3838

39-
`<select>`는 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
39+
`<select>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
4040

41-
[select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` prop을 전달해 주세요.
41+
[select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
4242

43-
* `value` : String 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 String 배열)이며 어떤 옵션을 선택할지 제어합니다. `value`는 `<select>` 내부에 중첩된 `<option>`의 `value`와 일치합니다.
43+
* `value` : 문자열 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 문자열 배열)이며 어떤 옵션을 선택할지 제어합니다. `value`는 `<select>` 내부에 중첩된 `<option>`의 `value`와 일치합니다.
4444

4545
`value`를 전달할 때, 전달된 `value`를 업데이트하는 `onChange` 핸들러를 전달해야 합니다.
4646

47-
`<select>`가 제어되지 않는다면, `defaultValue` prop을 전달합니다.
47+
`<select>`가 제어되지 않는다면, `defaultValue` Prop을 전달합니다.
4848

49-
* `defaultValue` : String 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 String 배열)이며 [초기 선택 옵션을](#providing-an-initially-selected-option) 지정합니다.
49+
* `defaultValue` : 문자열 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 문자열 배열)이며 [초기 선택 옵션을](#providing-an-initially-selected-option) 지정합니다.
5050

51-
`<select>` props는 제어되지 않는 상태와 제어되는 상태 모두에 적용됩니다.
51+
`<select>` Props는 제어되지 않는 상태와 제어되는 상태 모두에 적용됩니다.
5252
* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): 문자열 타입. 가능한 [자동완성 동작](https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete#%EA%B0%92) 중 하나를 지정합니다.
53-
* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): 불리언 타입. `true`이면 React가 마운트 시 해당 엘리먼트에 포커싱합니다.
53+
* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): 불리언 타입. `true`이면 React가 마운트 시 해당 요소에 포커싱합니다.
5454
* `children`: `<select>`는 자식으로 [`<option>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/optgroup), [`<datalist>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist) 컴포넌트를 받습니다. 또한 허용되는 컴포넌트 중 하나를 렌더링하기만 한다면 사용자 정의 컴포넌트를 전달할 수도 있습니다. 최종적으로 `<option>` 태그를 렌더링하는 사용자 정의 컴포넌트를 전달한다면, 렌더링되는 모든 `<option>` 은 `value`를 가져야 합니다.
5555
* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): 불리언 타입. `true`일 경우 select box는 상호작용할 수 없게 되고 흐리게 표시됩니다.
5656
* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): 문자열 타입. 이 select box가 속하는 `<form>`의 `id`를 지정합니다. 생략되면 가장 가까운 부모 폼으로 지정됩니다.
@@ -68,14 +68,14 @@ select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer
6868
#### 주의 사항 {/*caveats*/}
6969

7070
- HTML과는 달리, `selected` 어트리뷰트를 `<option>`에 전달하는 것은 지원하지 않습니다. 대신, [제어되지 않는 select box](#controlling-a-select-box-with-a-state-variable)인 경우 [`<select defaultValue>`](#providing-an-initially-selected-option)를 사용하고, [제어되어야 하는 select box](#controlling-a-select-box-with-a-state-variable)인 경우 [`<select value>`](#controlling-a-select-box-with-a-state-variable)를 사용해야 합니다.
71-
- `<select>`에 `value` prop이 전달된다면, [제어되는 것으로 간주합니다.](#controlling-a-select-box-with-a-state-variable)
71+
- `<select>`에 `value` Prop이 전달된다면, [제어되는 것으로 간주합니다.](#controlling-a-select-box-with-a-state-variable)
7272
- select box는 제어 상태와 비제어 상태를 동시에 행할 수 없습니다. 둘 중 하나의 상태만 가질 수 있습니다.
7373
- select box는 생명주기 동안 처음 설정한 제어 상태를 변경할 수 없습니다.
7474
- 제어되는 모든 select box는 제공되는 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다.
7575

7676
---
7777

78-
## 사용 방법 {/*usage*/}
78+
## 사용법 {/*usage*/}
7979

8080
### 옵션이 담긴 select box 표시 {/*providing-options-to-a-select-box*/}
8181

@@ -106,11 +106,11 @@ select { margin: 5px; }
106106

107107
---
108108

109-
### select box가 포함된 라벨 제공 {/*providing-a-label-for-a-select-box*/}
109+
### select box가 포함된 레이블 제공 {/*providing-a-label-for-a-select-box*/}
110110

111-
라벨이 해당 select box와 연결되어 있음을 브라우저에 알리기 위해 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 `<select>`를 배치합니다. 사용자가 라벨을 클릭하면 브라우저는 자동으로 select box에 초점을 맞춥니다. 또한, 접근성을 위해 필수적입니다. 사용자가 select box에 초점을 맞추면 스크린 리더가 라벨 캡션을 알립니다.
111+
레이블이 해당 select box와 연결되어 있음을 브라우저에 알리기 위해 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 `<select>`를 배치합니다. 사용자가 레이블을 클릭하면 브라우저는 자동으로 select box에 초점을 맞춥니다. 또한, 접근성을 위해 필수적입니다. 사용자가 select box에 초점을 맞추면 스크린 리더가 레이블 캡션을 알립니다.
112112

113-
`<select>`를 `<label>` 안에 중첩 시킬 수 없다면, 같은 ID를 `<select id>`와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 전달하여 연결해야 합니다. 한 컴포넌트에서 여러 인스턴스 간 충돌을 피하려면 [`useId`를 사용하여](/reference/react/useId) ID를 생성해 주세요.
113+
`<select>`를 `<label>` 안에 중첩 시킬 수 없다면, 같은 ID를 `<select id>`와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 전달하여 연결해야 합니다. 한 컴포넌트에서 여러 인스턴스 간 충돌을 피하려면 [`useId`를 사용하여](/reference/react/useId) ID를 생성하세요.
114114

115115
<Sandpack>
116116

@@ -154,7 +154,7 @@ select { margin: 5px; }
154154

155155
### 초기 선택 옵션 제공 {/*providing-an-initially-selected-option*/}
156156

157-
기본적으로 브라우저는 목록에서 첫 번째 `<option>`을 선택합니다. 다른 옵션을 기본값으로 선택하려면 `<select>` 엘리먼트에 `<option>`의 `value`를 `defaultValue`로 전달해야 합니다.
157+
기본적으로 브라우저는 목록에서 첫 번째 `<option>`을 선택합니다. 다른 옵션을 기본값으로 선택하려면 `<select>` 요소 `<option>`의 `value`를 `defaultValue`로 전달해야 합니다.
158158

159159
<Sandpack>
160160

@@ -283,7 +283,7 @@ label { margin-bottom: 20px; }
283283

284284
<Note>
285285

286-
`<select>`에 `name`을 지정해야 합니다.(예시 : `<select name="selectedFruit" />`) 지정한 `name`은 폼 데이터에서 키로 사용됩니다. (예시 : `{ selectedFruit: "orange" }`)
286+
`<select>`에 `name`을 지정해야 합니다. (예: `<select name="selectedFruit" />`) 지정한 `name`은 폼 데이터에서 키로 사용됩니다. (예: `{ selectedFruit: "orange" }`)
287287

288288
`<select multiple={true}>`를 사용하면 [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)에서 각 선택한 값을 별도의 이름-값 쌍으로 포함합니다. 위의 예시에서 콘솔 로그를 확인해 주세요.
289289

@@ -297,20 +297,20 @@ label { margin-bottom: 20px; }
297297

298298
---
299299

300-
### state 변수와 함께 select box 제어 {/*controlling-a-select-box-with-a-state-variable*/}
300+
### State 변수와 함께 select box 제어 {/*controlling-a-select-box-with-a-state-variable*/}
301301

302302
`<select>`와 같은 select box는 *제어되지 않습니다.* `<select defaultValue="orange" />`와 같이 [처음에 선택한 값](#providing-an-initially-selected-option)을 전달하더라도 JSX는 현재 값이 아닌 초기 값만 지정합니다.
303303

304-
**제어된 select box를 렌더링하려면 `value` prop을 전달해야 합니다.** React는 select box가 항상 전달한 `value`를 갖도록 강제합니다. 보통 [state 변수로 선언](/reference/react/useState)하여 선택 상자를 제어합니다.
304+
**제어된 select box를 렌더링하려면 `value` Prop을 전달해야 합니다.** React는 select box가 항상 전달한 `value`를 갖도록 강제합니다. 보통 [State 변수로 선언](/reference/react/useState)하여 선택 상자를 제어합니다.
305305

306306
```js {2,6,7}
307307
function FruitPicker() {
308-
const [selectedFruit, setSelectedFruit] = useState('orange'); // state 변수를 선언합니다.
308+
const [selectedFruit, setSelectedFruit] = useState('orange'); // State 변수를 선언합니다.
309309
// ...
310310
return (
311311
<select
312-
value={selectedFruit} // ...select의 값이 state 변수와 일치하도록 강제합니다....
313-
onChange={e => setSelectedFruit(e.target.value)} // ... 변경 사항이 있을 때마다 state 변수를 업데이트 합니다!
312+
value={selectedFruit} // ...select의 값이 State 변수와 일치하도록 강제합니다....
313+
onChange={e => setSelectedFruit(e.target.value)} // ... 변경 사항이 있을 때마다 State 변수를 업데이트 합니다!
314314
>
315315
<option value="apple">Apple</option>
316316
<option value="banana">Banana</option>
@@ -376,7 +376,7 @@ select { margin-bottom: 10px; display: block; }
376376

377377
<Pitfall>
378378

379-
**`onChange` 없이 `value`를 전달하면 옵션을 선택할 수 없습니다.** `value`를 전달하여 select box를 제어하면 전달한 값이 항상 있도록 *강제*합니다. 따라서 `value`를 state 변수로 전달했지만 `onChange` 이벤트 핸들러에서 state 변수를 동기적으로 업데이트하지 않으면 React는 키를 누를 때마다 select box를 지정한 `value`로 되돌립니다.
379+
**`onChange` 없이 `value`를 전달하면 옵션을 선택할 수 없습니다.** `value`를 전달하여 select box를 제어하면 전달한 값이 항상 있도록 *강제*합니다. 따라서 `value`를 State 변수로 전달했지만 `onChange` 이벤트 핸들러에서 State 변수를 동기적으로 업데이트하지 않으면 React는 키를 누를 때마다 select box를 지정한 `value`로 되돌립니다.
380380

381381
HTML과는 달리 개별 `<option>`에 `selected` 어트리뷰트를 전달하는 것은 지원하지 않습니다.
382382

0 commit comments

Comments
 (0)