diff --git a/content/community/support.md b/content/community/support.md index a133c43f8..e6ec00f64 100644 --- a/content/community/support.md +++ b/content/community/support.md @@ -28,7 +28,6 @@ Each community consists of many thousands of React users. * [Hashnode's React community](https://hashnode.com/n/reactjs) * [Reactiflux online chat](https://discord.gg/reactiflux) * [Reddit's React community](https://www.reddit.com/r/reactjs/) -* [Spectrum's React community](https://spectrum.chat/react) ## News {#news} diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 97bcb2074..18faf92e0 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -149,7 +149,7 @@ return ( 위 두 코드들은 같은 기능을 수행합니다. **JSX는 [필수가 아닌 선택사항](/docs/react-without-jsx.html)**이지만 사람들은 UI 코드를 짤 때 JSX를 쓰는 것이 더 편리하다고 생각합니다. React와 다른 라이브러리들에서도 말이죠. -[이 온라인 변화기](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3)를 통해서 JSX로 여러 가지 작업을 해볼 수 있습니다. +[이 온라인 변화기](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7)를 통해서 JSX로 여러 가지 작업을 해볼 수 있습니다. ### JSX 빠르게 시도해보기 {#quickly-try-jsx} diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 8cd63821e..f7a8d947c 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -62,7 +62,7 @@ class ErrorBoundary extends React.Component { 에러 경계는 자바스크립트의 `catch {}` 구문과 유사하게 동작하지만 컴포넌트에 적용됩니다. 오직 클래스 컴포넌트만이 에러 경계가 될 수 있습니다. 실제로도 대부분의 경우 에러 경계 컴포넌트를 한 번만 선언하여 애플리케이션 전체에서 활용하려고 할 것입니다. -**에러 경계는 트리 내에서 하위에 존재하는 컴포넌트의 에러만을 포착합니다**. 에러 경계 자체적으로는 에러를 포착할 수 없습니다. 에러 경계가 에러 메시지를 렌더링하는 데에 실패한다면 에러는 그 위의 가장 가까운 에러 경계로 전파될 것입니다. 이 또한 자바스크립트의 catch {} 구문이 동작하는 방식과 유사합니다. +**에러 경계는 트리 내에서 하위에 존재하는 컴포넌트의 에러만을 포착합니다**. 에러 경계 자체적으로는 에러를 포착할 수 없습니다. 에러 경계가 에러 메시지를 렌더링하는 데에 실패한다면 에러는 그 위의 가장 가까운 에러 경계로 전파될 것입니다. 이 또한 자바스크립트의 `catch {}` 구문이 동작하는 방식과 유사합니다. ## 라이브 데모 {#live-demo} diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 20a90703e..603dde5d4 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -913,8 +913,6 @@ function DeepChild(props) { >주의 > >props의 개별 콜백보다는 [context에서 `dispatch`를 전달](#how-to-avoid-passing-callbacks-down)하는 것이 좋습니다. 아래 접근 방식은 완전성과 탈출구로만 여기에서 언급됩니다. -> ->또한 이 패턴은 [동시 모드](/blog/2018/03/27/update-on-async-rendering.html)에서 문제를 일으킬 수 있습니다. 앞으로 더 효율적인 대안을 제공할 계획이지만 현재 가장 안전한 해결책은 값이 변경에 따라 달라지는 경우 항상 콜백을 무효로 하는 것입니다. 드물게 [`useCallback`](/docs/hooks-reference.html#usecallback)을 사용하여 콜백을 메모해야 할 수도 있지만, 내부 함수 컴포넌트를 너무 자주 다시 만들어야 하므로 메모가 제대로 작동하지 않습니다. 메모하는 함수 컴포넌트가 이벤트 핸들러이고 렌더링 중에 사용되지 않는 경우 [ref를 인스턴스 변수로](#is-there-something-like-instance-variables) 사용하고 마지막으로 커밋 된 값을 수동으로 저장할 수 있습니다. diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index f0a414f4d..a44e360f8 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -137,7 +137,7 @@ UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 React는 전통적인 양방향 데이터 바인딩(two-way data binding)과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와줍니다. -현재 상태에서 input box를 체크하거나 키보드를 타이핑할 경우 React가 입력을 무시하는 것을 확인할 수 있습니다. 이는 `input`태그의 `value`속성이 항상 `FilterableProductTable`에서 전달된 state와 동일하도록 설정했기 때문입니다. +4단계의 예시에서 체크하거나 키보드를 타이핑할 경우 React가 입력을 무시하는 것을 확인할 수 있습니다. 이는 `input` 태그의 `value` 속성이 항상 `FilterableProductTable`에서 전달된 state와 동일하도록 설정했기 때문입니다. 우리가 원하는 것이 무엇인지를 한번 생각해봅시다. 우리는 사용자가 폼을 변경할 때마다 사용자의 입력을 반영할 수 있도록 state를 업데이트하기를 원합니다. 컴포넌트는 그 자신의 state만 변경할 수 있기 때문에 `FilterableProductTable`는 `SearchBar`에 콜백을 넘겨서 state가 업데이트되어야 할 때마다 호출되도록 할 것입니다. 우리는 input에 onChange 이벤트를 사용해서 알림을 받을 수 있습니다. `FilterableProductTable`에서 전달된 콜백은 `setState()`를 호출하고 앱이 업데이트될 것입니다. diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 579b73c94..af9f2e0d8 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1049,6 +1049,8 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] **[지금까지의 전체 코드 확인하기](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** +`history` 배열을 순회하면서 `step` 변수는 현재 `history` 요소의 값을 참조하며 `move`는 현재 `history` 요소의 인덱스를 참조합니다. 지금은 `move`에만 관심이 있으므로 `step`은 다른 곳에 할당되진 않습니다. + 틱택토 게임 기록의 각각 이동마다 버튼 `