Sync with react.dev @ ebc45f5 (#644)

react-translations-bot · acdlite · gaearon · web-flow · commit f2c78f6b9fdc · 2023-05-20T16:16:02.000+09:00
* Next Channel -> Canary Channel (#5992) See facebook/react#26761 for more context. * Canaries blog post * Revert "Canaries blog post" This reverts commit aa88d8a. * Fixes grammar (#5967) * Canaries blog post (#5993) * Revert "Revert "Canaries blog post"" This reverts commit 9a865fd. * words --------- Co-authored-by: Sophie Alpert <git@sophiebits.com> * tweak * renderToReadableStream => renders a readable web stream (and not a Node.js stream) (#6001) * Update Profiler.md (#6000) * remove cancelled conference 2023 (#5999) * Minor tweak to remove implication that mounting can happen only once (#6003) Mounting with Suspense and Offscreen can happen multiple times. This removes some wording that implies a that effects / lifecycle hooks only happen on first mount. * Conditionally render offset div (#5997) Otherwise the address is being offset to the right when the refresh icon is not displayed * Remove unnecessary backticks breaking markdown highlighting (#6025) * resolve sync conflcit --------- Co-authored-by: Andrew Clark <git@andrewclark.io> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Elton Maiyo <lt.eltronix@gmail.com> Co-authored-by: Sophie Alpert <git@sophiebits.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: declval <123750459+declval@users.noreply.github.com> Co-authored-by: Hernani Fernandes <hernanif1@gmail.com> Co-authored-by: Jan Kassens <jan@kassens.net> Co-authored-by: Sami Romdhana <64911368+sami-romdhana@users.noreply.github.com> Co-authored-by: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Co-authored-by: eomttt <hyunt0413@gmail.com>
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
@@ -882,7 +882,7 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
 
 // These are two different objects!
 console.log(Object.is(options1, options2)); // false
-````
+```
 
 **Object and function dependencies can make your Effect re-synchronize more often than you need.** 
 
@@ -968,7 +968,7 @@ const roomId2 = 'music';
 
 // These two strings are the same!
 console.log(Object.is(roomId1, roomId2)); // true
-````
+```
 
 Thanks to this fix, the chat no longer re-connects if you edit the input:
 
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
@@ -239,7 +239,7 @@ function ChatRoom({ roomId, theme }) {
     });
     connection.connect();
     // ...
-````
+```
 
 However, `theme` is a reactive value (it can change as a result of re-rendering), and [every reactive value read by an Effect must be declared as its dependency.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) Now you have to specify `theme` as a dependency of your Effect:
 
@@ -256,7 +256,7 @@ function ChatRoom({ roomId, theme }) {
     };
   }, [roomId, theme]); // ✅ All dependencies declared
   // ...
-````
+```
 
 Play with this example and see if you can spot the problem with this user experience:
 
@@ -416,7 +416,7 @@ function ChatRoom({ roomId, theme }) {
     showNotification('Connected!', theme);
   });
   // ...
-````
+```
 
 Here, `onConnected` is called an *Effect Event.* It's a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always "sees" the latest values of your props and state.
 
diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
@@ -327,7 +327,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 #### 신호등을 구현해봅시다 {/*implement-a-traffic-light*/}
 
-다음은 버튼을 눌렀을 때 켜지는 횡단보도 조명 컴포넌트입니다.
+다음은 버튼을 토글되는 신호등 컴포넌트입니다.
 
 <Sandpack>
 
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
@@ -184,7 +184,7 @@ const nextPosition = {};
 nextPosition.x = e.clientX;
 nextPosition.y = e.clientY;
 setPosition(nextPosition);
-````
+```
 
 위 코드는 아래처럼 작성할 수 있습니다.
 
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
@@ -133,7 +133,7 @@ import { createRoot } from 'react-dom/client';
 
 const root = createRoot(document.getElementById('root'));
 root.render(<App />);
-````
+```
 
 Usually, you only need to run this code once at startup. It will:
 
@@ -395,7 +395,7 @@ root.render(App);
 
 // ✅ Correct: <App /> is a component.
 root.render(<App />);
-````
+```
 
 Or if you pass a function to `root.render`, instead of the result of calling it:
 
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -124,7 +124,7 @@ root.unmount();
 import { hydrateRoot } from 'react-dom/client';
 
 hydrateRoot(document.getElementById('root'), <App />);
-````
+```
 
 위 코드를 통해 서버 HTML을 <CodeStep step={1}>브라우저 DOM node</CodeStep>에서 <CodeStep step={2}>리액트 컴포넌트</CodeStep>를 이용해 hydrate 해줄 것 입니다. 주로 앱을 시작할 때 단 한 번 실행하게 될 것입니다. 프레임워크를 사용중이라면 프레임워크가 알아서 실행해 줄 것입니다.
 
diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
@@ -68,7 +68,7 @@ Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a
 import { hydrate } from 'react-dom';
 
 hydrate(<App />, document.getElementById('root'));
-````
+```
 
 Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
 
diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md
@@ -77,7 +77,7 @@ import { render } from 'react-dom';
 import App from './App.js';
 
 render(<App />, document.getElementById('root'));
-````
+```
 
 ### 최상단 컴포넌트 렌더링하기 {/*rendering-the-root-component*/}
 
diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md
@@ -64,7 +64,7 @@ render(<App />, rootNode);
 
 // ...
 unmountComponentAtNode(rootNode);
-````
+```
 
 
 ### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
@@ -427,7 +427,7 @@ With this approach, `Row` does not need to receive an `isHighlighted` prop at al
 export default function Row({ title }) {
   const isHighlighted = useContext(HighlightContext);
   // ...
-````
+```
 
 This allows the calling component to not know or worry about passing `isHighlighted` to `<Row>`:
 
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
@@ -166,7 +166,7 @@ import { createContext } from 'react';
 
 export const ThemeContext = createContext('light');
 export const AuthContext = createContext(null);
-````
+```
 
 Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
 
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
@@ -531,7 +531,7 @@ function ChatRoom({ roomId }) {
     serverUrl: serverUrl
   });
   // ...
-````
+```
 
 There are also many excellent custom Hooks for every purpose available in the React ecosystem.
 
