[docs/korean] Translate official document to Korean

docs/docs/basic-tutorial/performance.md

@@ -57,7 +57,7 @@ That helps with the re-renders of `<TodoItemCreator />` and `<TodoListFilters />
 
 Thinking of a todo list as an array of objects is problematic because it forms a tight coupling between each individual todo item and the list of all todo items.
 
-To fix this issue, we need to rethink our state shape by thinking about **normalized state**. In the context of our todo-list app, this means storing the **list** of item ids separately from the **data** for each invididual item.
+To fix this issue, we need to rethink our state shape by thinking about **normalized state**. In the context of our todo-list app, this means storing the **list** of item ids separately from the **data** for each individual item.
 
 > For a more detailed discussion on how to think about normalized state, see [this page from the Redux documentation](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape).
 

docs/docs_kr/api-reference/core/RecoilRoot.md

@@ -0,0 +1,30 @@
+---
+title: <RecoilRoot ...props />
+sidebar_label: <RecoilRoot />
+---
+
+Provides the context in which atoms have values. Must be an ancestor of any component that uses any Recoil hooks. Multiple roots may co-exist; atoms will have distinct values within each root. If they are nested, the innermost root will completely mask any outer roots.
+
+---
+
+- `props`
+  - `initializeState?`: `({set, setUnvalidatedAtomValues}) => void`.
+    - A function that will be called when RecoilStore is first rendered which can set initial values for atoms. It is provided with two arguments:
+      - `set`: `<T>(RecoilValue<T>, T) => void`
+        - Sets the initial value of a single atom to the provided value.
+      - `setUnvalidatedAtomValues`: `(Map<string, mixed>) => void`
+        - Sets the initial value for any number of atoms whose keys are the keys in the provided map. As with `useSetUnvalidatedAtomValues`, the validator for each atom will be called when it is next read, and setting an atom without a configured validator will result in an exception.
+
+### Example
+
+```javascript
+import {RecoilRoot} from 'recoil';
+
+function AppRoot() {
+  return (
+    <RecoilRoot>
+      <ComponentThatUsesRecoil />
+    </RecoilRoot>
+  );
+}
+```

docs/docs_kr/api-reference/core/atom.md

@@ -0,0 +1,44 @@
+---
+title: atom(options)
+sidebar_label: atom()
+---
+
+Returns writeable Recoil state.
+
+---
+
+- `options`
+  - `key`: A unique string used to identify the atom internally. This string should be unique with respect to other atoms and selectors in the entire application.
+  - `default`: The initial value of the atom.
+
+Most often, you'll use the following hooks to read the value of atoms:
+
+- [`useRecoilState()`](/docs/api-reference/core/useRecoilState): use this hook when you intend on both reading and writing to the atom.
+- [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue): use this hook when you intend on only reading the atom.
+- [`useSetRecoilState()`](/docs/api-reference/core/useRecoilState): use this hook when you intend on only writing to the atom.
+
+Note all of the hooks above result in the component **subscribing** to the atom, so the component will re-render on any subsequent updates to the atom. For rare cases where you need to read an atom's value without subscribing the component, see [`useRecoilCallback()`](/docs/api-reference/core/useRecoilCallback).
+
+### Example
+
+```javascript
+import {atom, useRecoilState} from 'recoil';
+
+const counter = atom({
+  key: 'myCounter',
+  default: 0,
+});
+
+function Counter() {
+  const [count, setCount] = useRecoilState(counter);
+  const incrementByOne = () => setCount(count + 1);
+
+  return (
+    <div>
+      Count: {count}
+      <br />
+      <button onClick={incrementByOne}>Increment</button>
+    </div>
+  );
+}
+```

docs/docs_kr/api-reference/core/isRecoilValue.md

@@ -0,0 +1,30 @@
+---
+title: isRecoilValue(value)
+sidebar_label: isRecoilValue()
+---
+
+Returns `true` if `value` is either an atom or selector and `false` otherwise.
+
+---
+
+### Example
+
+```javascript
+import {atom, isRecoilValue} from 'recoil';
+
+const counter = atom({
+  key: 'myCounter',
+  default: 0,
+});
+
+const strCounter = selector({
+  key: 'myCounterStr',
+  get: ({get}) => String(get(counter)),
+});
+
+isRecoilValue(counter); // true
+isRecoilValue(strCounter); // true
+
+isRecoilValue(5); // false
+isRecoilValue({}); // false
+```

docs/docs_kr/api-reference/core/selector.md

@@ -0,0 +1,57 @@
+---
+title: selector(options)
+sidebar_label: selector()
+---
+
+Returns writeable or read-only Recoil state, depending on the options passed to the function.
+
+Selectors represent **derived state**. You can think of derived state as the output of passing state to a pure function that modifies the given state in some way.
+
+---
+
+- `options`
+  - `key`: A unique string used to identify the atom internally. This string should be unique with respect to other atoms and selectors in the entire application.
+  - `get`: A function that is passed an object as the first parameter containing the following properties:
+    - `get`: a function used to retrieve values from other atoms/selectors. All atoms/selectors passed to this function will be implicitly added to a list of **dependencies** for the selector. If any of the selector's dependencies change, the selector will re-evaluate.
+  - `set?`: If this property is set, the selector will return **writeable** state. A function that is passed an object as the first parameter containing the following properties:
+    - `get`: a function used to retrieve values from other atoms/selectors. This function will not subscribe the selector to the given atoms/selectors.
+    - `set`: a function used to set the values of Recoil state. The first parameter is the Recoil state and the second parameter is the new value.
+
+### Example (Synchronous)
+
+```javascript
+import {atom, selector, useRecoilState} from 'recoil';
+
+const tempFahrenheit = atom({
+  key: 'tempFahrenheit',
+  default: 32,
+});
+
+const tempCelcius = selector({
+  key: 'tempCelcius',
+  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
+  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
+});
+
+function TempCelcius() {
+  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
+  const [tempC, setTempC] = useRecoilState(tempCelcius);
+
+  const addTenCelcius = () => setTempC(tempC + 10);
+  const addTenFahrenheit = () => setTempF(tempF + 10);
+
+  return (
+    <div>
+      Temp (Celcius): {tempC}
+      <br />
+      Temp (Fahrenheit): {tempF}
+      <br />
+      <button onClick={addTenCelcius}>Add 10 Celcius</button>
+      <br />
+      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
+    </div>
+  );
+}
+```
+
+### Example (Asynchronous)

docs/docs_kr/api-reference/core/useRecoilCallback.md

@@ -0,0 +1,28 @@
+---
+title: useRecoilCallback()
+---
+
+### Example
+
+```javascript
+import {atom, useRecoilCallback} from 'recoil';
+
+const itemsInCart = atom({
+  key: 'itemsInCart',
+  default: 0,
+});
+
+function CartInfoDebug() {
+  const logCartItems = useRecoilCallback(async ({getPromise}) => {
+    const numItemsInCart = await getPromise(itemsInCart);
+
+    console.log('Items in cart: ', numItemsInCart);
+  });
+
+  return (
+    <div>
+      <button onClick={logCartItems}>Log Cart Items</button>
+    </div>
+  );
+}
+```

docs/docs_kr/api-reference/core/useRecoilState.md

@@ -0,0 +1,51 @@
+---
+title: useRecoilState(state)
+sidebar_label: useRecoilState()
+---
+
+Returns a tuple where the first element is the value of state and the second element is a setter function that will update the value of the given state when called.
+
+This hook will implicitly subscribe the component to the given state.
+
+---
+
+- `state`: an [`atom`](/docs/api-reference/core/atom) or a _writeable_ [`selector`](/docs/api-reference/core/selector). Writeable selectors are selectors that were have both a `get` and `set` in their definition while read-only selectors only have a `get`.
+
+This is the recommended hook to use when a component intends to read and write state.
+
+### Example
+
+```javascript
+import {atom, selector, useRecoilState} from 'recoil';
+
+const tempFahrenheit = atom({
+  key: 'tempFahrenheit',
+  default: 32,
+});
+
+const tempCelcius = selector({
+  key: 'tempCelcius',
+  get: ({get}) => ((get(temptempFahrenheit) - 32) * 5) / 9,
+  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
+});
+
+function TempCelcius() {
+  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
+  const [tempC, setTempC] = useRecoilState(tempCelcius);
+
+  const addTenCelcius = () => setTempC(tempC + 10);
+  const addTenFahrenheit = () => setTempF(tempF + 10);
+
+  return (
+    <div>
+      Temp (Celcius): {tempC}
+      <br />
+      Temp (Fahrenheit): {tempF}
+      <br />
+      <button onClick={addTenCelcius}>Add 10 Celcius</button>
+      <br />
+      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
+    </div>
+  );
+}
+```

docs/docs_kr/api-reference/core/useRecoilStateLoadable.md

@@ -0,0 +1,3 @@
+---
+title: useRecoilStateLoadable()
+---

docs/docs_kr/api-reference/core/useRecoilValue.md

@@ -0,0 +1,43 @@
+---
+title: useRecoilValue(state)
+sidebar_label: useRecoilValue()
+---
+
+Returns the value of the given Recoil state.
+
+This hook will implicitly subscribe the component to the given state.
+
+---
+
+- `state`: an [`atom`](/docs/api-reference/core/atom) or [`selector`](/docs/api-reference/core/selector)
+
+This is the recommended hook to use when a component intends to read state without writing to it as this hook works with both **read-only state** and **writeable state**. Atoms are writeable state while selectors may be either read-only or writeable. See [`selector()`](/docs/api-reference/core/selector) for more info.
+
+### Example
+
+```javascript
+import {atom, selector, useRecoilValue} from 'recoil';
+
+const namesState = atom({
+  key: 'namesState',
+  default: ['', 'Ella', 'Chris', '', 'Paul'],
+});
+
+const filteredNamesState = selector({
+  key: 'filteredNamesState',
+  get: ({get}) => get(namesState).filter((str) => str !== ''),
+});
+
+function NameDisplay() {
+  const names = useRecoilValue(namesState);
+  const filteredNames = useRecoilValue(filteredNamesState);
+
+  return (
+    <>
+      Original names: {names.join(',')}
+      <br />
+      Filtered names: {filteredNames.join(',')}
+    </>
+  );
+}
+```

docs/docs_kr/api-reference/core/useRecoilValueLoadable.md

@@ -0,0 +1,23 @@
+---
+title: useRecoilValueLoadable(state)
+sidebar_label: useRecoilValueLoadable()
+---
+
+Returns a `Loadable`.
+
+This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.
+
+Unlike `useRecoilValue()`, this hook will not throw a `Promise` when reading from a pending asynchronous selector (for the purpose of working alongside Suspense). Instead, this hook returns a `Loadable`, which is an object with the following interface:
+
+- `state`: indicates the status of the selector. Possible values are `'hasValue'`, `'hasError'`, `'loading'`.
+- `getValue()`: if there is an error, this function throws the error. If selector is still loading, it throws a Promise. Otherwise it returns the value that the selector resolved to.
+- `toPromise()`: returns a `Promise` that will resolve when the selector has resolved. If the selector is synchronous or has already resolved, it returns a `Promise` that resolves immediately.
+
+---
+
+- `state`: a [`selector`](/docs/api-reference/core/selector) that _may_ have some asynchronous operations. The status of the returned loadable will depend on the status of the given selector.
+
+### Example
+
+```jsx
+```

docs/docs_kr/api-reference/core/useResetRecoilState.md

@@ -0,0 +1,11 @@
+---
+title: useResetRecoilState(state)
+---
+
+Returns a function that will reset the value of the given state to its default value.
+
+---
+
+- `state`: a writeable Recoil state
+
+### Example

docs/docs_kr/api-reference/core/useSetRecoilState.md

@@ -0,0 +1,12 @@
+---
+title: useSetRecoilState(state)
+sidebar_label: useSetRecoilState()
+---
+
+Returns a setter function for updating the value of writeable Recoil state.
+
+---
+
+- `state`: writeable Recoil state.
+
+### Example

docs/docs_kr/api-reference/utils/atomFamily.md

@@ -0,0 +1,3 @@
+---
+title: atomFamily()
+---

docs/docs_kr/api-reference/utils/constSelector.md

@@ -0,0 +1,3 @@
+---
+title: constSelector()
+---

docs/docs_kr/api-reference/utils/errorSelector.md

@@ -0,0 +1,3 @@
+---
+title: errorSelector()
+---

docs/docs_kr/api-reference/utils/noWait.md

@@ -0,0 +1,3 @@
+---
+title: noWait()
+---

docs/docs_kr/api-reference/utils/selectorFamily.md

@@ -0,0 +1,3 @@
+---
+title: selectorFamily()
+---

docs/docs_kr/api-reference/utils/waitForAll.md

@@ -0,0 +1,3 @@
+---
+title: waitForAll()
+---

docs/docs_kr/api-reference/utils/waitForAny.md

@@ -0,0 +1,3 @@
+---
+title: waitForAny()
+---

docs/docs_kr/api-reference/utils/waitForNone.md

@@ -0,0 +1,3 @@
+---
+title: waitForNone()
+---