diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..c8dc662c2 --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,21 @@ +name: Discord Notify + +on: + pull_request_target: + types: [labeled] + +jobs: + notify: + if: ${{ github.event.label.name == 'React Core Team' }} + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 7c7aa4c3f..f4462b207 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -164,6 +164,14 @@ export function HomeContent() { label="API Reference"> API 참고서 + + React v18 한글 + diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index 296155b93..4fb1935d9 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -35,6 +35,22 @@ declare global { } } +const react18Icon = ( + + + + +); + const darkIcon = ( +
+ + {react18Icon} + +
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index d5df755bc..cedd9d507 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -25,6 +25,11 @@ June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) [Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + ## Past Conferences {/*past-conferences*/} ### React Africa 2024 {/*react-africa-2024*/} diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 37852b95c..b60997633 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -21,8 +21,8 @@ title: 기존 프로젝트에 React 추가하기 다음과 같이 설정하는 것을 추천합니다. 1. [React 기반 프레임워크](/learn/start-a-new-react-project) 중 하나를 사용하여 **앱의 React 부분을 빌드하세요.** -2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로**Base Path*로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!) -3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 애플리케이션에서 처리되도록 하세요. +2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로**Base Path*로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!) +3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 앱에서 처리되도록 하세요. 이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들Best Practices로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index a7d9a6f29..e01007118 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -1,17 +1,17 @@ --- -title: 컴포넌트 순수하게 유지하기 +title: 컴포넌트를 순수하게 유지하기 --- -자바스크립트 일부 함수는 *순수*합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 이러한 이점들을 취하기 위해서는 몇가지 규칙을 따라야합니다. +일부 자바스크립트 함수는 *순수*합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 이러한 이점들을 취하기 위해서는 몇가지 규칙을 따라야합니다. * 순수성이란 무엇인지 그리고 어떻게 버그를 피하도록 도울 건지 배웁니다. -* 렌더 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다. +* 렌더링 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다. * 엄격 모드를 어떻게 활용해서 컴포넌트에 실수를 발견할 수 있는지 배웁니다. @@ -21,17 +21,17 @@ title: 컴포넌트 순수하게 유지하기 컴퓨터 과학에서(특히 함수형 프로그래밍의 세계에서는) [순수 함수](https://wikipedia.org/wiki/Pure_function)는 다음과 같은 특징을 지니고 있는 함수입니다. * **자신의 일에 집중합니다.** 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않습니다. -* **같은 입력, 같은 출력** 같은 입력이 주어졌다면 순수함수는 같은 결과를 반환해야 합니다. +* **같은 입력, 같은 출력.** 같은 입력이 주어졌다면 순수함수는 같은 결과를 반환합니다. -아마 순수 함수 중에 이 함수는 수학의 공식처럼 익숙할 것입니다. +여러분은 이미 순수 함수의 한 예로 수학 공식에 익숙할 수도 있습니다. 이 수학 공식을 생각해보세요. y = 2x. -만약 x = 2이라면 항상 y = 4입니다. +만약 x = 2이라면 항상 y = 4입니다. -만약 x = 3이라면 항상y = 6입니다. +만약 x = 3이라면 항상 y = 6입니다. -만약 x = 3이라면, 그날의 시간이나 주식 시장의 상태에 따라서 y가 9이거나 –1이거나 2.5가 되지 않습니다. +만약 x = 3이라면, 그날의 시간이나 주식 시장의 상태에 따라서 y가 9이거나 –1이거나 2.5가 되지 않습니다. 만약 y = 2x 그리고 x = 3이라면, y는 _항상_ 6입니다. @@ -45,7 +45,7 @@ function double(number) { 위 예시에서, `double`은 **순수 함수**입니다. `3`을 넘긴다면, `6`을 항상 반환합니다. -React는 이러한 컨셉을 기반으로 설계되었습니다. **React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다.** 이러한 가정은 작성되는 React 컴포넌트에 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다. +React는 이러한 개념을 기반으로 설계되었습니다. **React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다.** 이러한 가정은 작성되는 React 컴포넌트에 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다. @@ -81,13 +81,13 @@ export default function App() { 수학 공식처럼 말입니다. -컴포넌트를 마치 레시피처럼 생각할 수 있습니다. 만약 레시피를 그대로 따르고 요리하는 동안 새로운 재료를 도입하지 않는 이상 매번 새로운 요리를 만들 수 있습니다. 그 "요리"는 React가 [렌더](/learn/render-and-commit)하는데 컴포넌트가 제공하는 JSX입니다. +컴포넌트를 마치 레시피라고 생각할 수 있습니다. 만약 레시피를 그대로 따르고 요리하는 동안 새로운 재료를 추가하지 않으면, 매번 동일한 요리를 만들 수 있습니다. 그 "요리"는 React가 [렌더링](/learn/render-and-commit)하는데 컴포넌트가 제공하는 JSX입니다. ## 사이드 이펙트: 의도하지(않은) 결과 {/*side-effects-unintended-consequences*/} -React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 렌더링하기 전에 존재했던 객체나 변수들을 *변경*하지 말고 컴포넌트를 순수하지 않도록하는 JSX만 *반환*해야합니다. +React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 JSX만 반환해야 하며, 렌더링 이전에 존재했던 객체나 변수를 변경해서는 안 됩니다. 그렇게 하면 컴포넌트가 순수하지 않습니다! 이러한 규칙을 위반하는 컴포넌트입니다. @@ -97,7 +97,7 @@ React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 렌 let guest = 0; function Cup() { - // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다! + // 나쁜 지점: 이미 존재했던 변수를 변경하고 있습니다! guest = guest + 1; return

Tea cup for guest #{guest}

; } @@ -115,11 +115,11 @@ export default function TeaSet() { -이 컴포넌트는 컴포넌트 바깥에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 이건 **컴포넌트가 여러번 불리면 다른 JSX를 생성한다는 것을 의미합니다!** 그리고 더욱이 _다른_ 컴포넌트 가 `guest`를 읽었다면 언제 렌더링 되었는지에 따라 그 컴포넌트 또한 다른 JSX를 생성할 겁니다! 이건 예측할 수 없습니다. +이 컴포넌트는 컴포넌트 바깥에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 이건 **컴포넌트를 여러번 호출하면 다른 JSX를 생성한다는 것을 의미합니다!** 그리고 더욱이 _다른_ 컴포넌트 가 `guest`를 읽었다면 언제 렌더링 되었는지에 따라 그 컴포넌트 또한 다른 JSX를 생성할 겁니다! 이건 예측할 수 없습니다. -우리의 공식으로 다시 돌아가봅시다 y = 2x, 이제 x = 2라 하더라도 우리는 y = 4를 믿을 수 없습니다. 우리의 테스트는 실패하고 사용자는 당황할 것이고 비행기는 추락할지도 모릅니다-이것이 얼마나 혼란스러운 버그로 이어지는지를 볼 수 있습니다! +우리의 공식으로 다시 돌아가봅시다 y = 2x, 이제 x = 2라 하더라도 우리는 y = 4를 믿을 수 없습니다. 우리의 테스트는 실패하고 사용자는 당황할 것이고 비행기는 추락할지도 모릅니다. 이것이 얼마나 혼란스러운 버그로 이어지는지를 볼 수 있습니다! -[`guest` 변수를 대신 프로퍼티로 넘겨](/learn/passing-props-to-a-component) 이 컴포넌트를 고칠 수 있습니다. +대신, [`guest` 변수를 프로퍼티로 넘겨](/learn/passing-props-to-a-component) 이 컴포넌트를 고칠 수 있습니다. @@ -141,7 +141,7 @@ export default function TeaSet() { -이제 JSX가 반환되는 것은 오직 `guest` 프로퍼티에 의존하기 때문에 컴포넌트는 순수합니다. +이제 JSX가 반환하는 것은 오직 `guest` 프로퍼티에만 의존하기 때문에 컴포넌트는 순수합니다. 일반적으로 컴포넌트가 특정 순서로 렌더링할 것으로 기대하면 안됩니다. y = 5x 전후에 y = 2x을 호출한다면 문제가 없습니다. 두 공식은 서로 독립적으로 풀립니다. 마찬가지로 각 컴포넌트는 렌더링 중에 다른 컴포넌트와 같이 서로 의존하지 말고 "스스로 생각"해야 합니다. 렌더링은 학교 숙제와 같습니다. 각 컴포넌트는 자체적으로 JSX를 연산해야 합니다! @@ -149,21 +149,21 @@ export default function TeaSet() { #### 엄격 모드로 순수하지 않은 연산을 감지 {/*detecting-impure-calculations-with-strict-mode*/} -아직 다 활용하지 않았을 수도 있지만 React에는 렌더링하면서 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), 그리고 [context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다. +아직 전부 활용하지 않았을 수도 있지만 React에는 렌더링하면서 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [Props](/learn/passing-props-to-a-component), [State](/learn/state-a-components-memory), 그리고 [Context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다. -사용자의 입력에 따라 무언가를 _변경_ 하려는 경우, 변수를 직접 수정하는 대신 [set state](/learn/state-a-components-memory)를 활용해야 합니다. 컴포넌트가 렌더링되는 동안엔 기존 변수나 개체를 변경하면 안됩니다. +사용자의 입력에 따라 무언가를 _변경_ 하려는 경우, 변수를 직접 수정하는 대신 [State](/learn/state-a-components-memory)를 설정해야 합니다. 컴포넌트가 렌더링되는 동안엔 기존 변수나 객체를 변경하면 안됩니다. React는 개발 중에 각 컴포넌트의 함수를 두 번 호출하는 "엄격 모드"를 제공합니다. **컴포넌트 함수를 두 번 호출함으로써, 엄격 모드는 이러한 규칙을 위반하는 컴포넌트를 찾는데 도움을 줍니다.** -원래 예시에서 "Guest #1", "Guest #2", 그리고 "Guest #3" 대신 "Guest #2", "Guest #4", 그리고 "Guest #6"이 어떻게 표시되었는지 확인해보세요. 원래 함수는 순수하지 않았기에 두 번 호출하는 것이 이 부분을 망가트렸습니다. 그러나 고정된 순수 버전은 함수가 매번 두 번 호출되더라도 동작합니다. **순수 함수는 연산만 하므로 두 번 호출해도 아무 것도 변경되지 않습니다.**--`double(2)`을 두번 호출하는게 반환된 것을 변경하지 않고 y = 2x을 두 번 푸는게 y의 답을 바꾸지 않는 것 처럼, 항상 같은 입력이면 같은 출력입니다. +원래 예시에서 "Guest #1", "Guest #2", "Guest #3" 대신 "Guest #2", "Guest #4", "Guest #6"이 어떻게 표시되었는지 확인해보세요. 원래 함수는 순수하지 않았기에 두 번 호출하는 것이 이 부분을 망가트렸습니다. 그러나 수정된 순수 버전은 함수가 매번 두 번 호출되더라도 동작합니다. **순수 함수는 연산만 하므로 두 번 호출해도 아무 것도 변경하지 않습니다.** `double(2)`를 두 번 호출하는게 반환된 것을 변경하지 않고 y = 2x을 두 번 푸는게 y의 답을 바꾸지 않는 것 처럼, 항상 같은 입력이면 같은 출력입니다. 엄격 모드는 프로덕션에 영향을 주지 않기 때문에 사용자의 앱 속도가 느려지지 않습니다. 엄격 모드를 사용하기 위해서, 최상단 컴포넌트를 ``로 감쌀 수 있습니다. 몇몇 프레임워크는 기본적으로 이 문법을 사용합니다. -### 지역 변형: 컴포넌트의 작은 비밀 {/*local-mutation-your-components-little-secret*/} +### 지역 변경: 컴포넌트의 작은 비밀 {/*local-mutation-your-components-little-secret*/} -위의 예시에서 문제는 렌더링하는 동안 컴포넌트가 기존 변수를 변경했다는 것입니다. 이것은 "**변형**"으로 불리워서 조금 무섭게 들립니다. 순수 함수는 함수 스코프 밖의 변수나 호출 전에 생성된 객체를 변경하지 않습니다. +위 예시에서의 문제는 렌더링하는 동안 컴포넌트가 기존 변수를 변경했다는 것입니다. 이것은 "**변경Mutation**"으로 불리워서 조금 무섭게 들립니다. 순수 함수는 함수 스코프 밖의 변수나 호출 전에 생성된 객체를 변경하지 않습니다. 그러나, **렌더링하는 동안 _그냥_ 만든 변수와 객체를 변경하는 것은 전혀 문제가 없습니다.** 이번 예시에서는, `[]` 배열을 만들고, `cups` 변수에 할당하고, 컵 한 묶음을 `push` 할 것입니다. @@ -185,15 +185,15 @@ export default function TeaGathering() { -만약 `cups` 변수나 `[]` 배열이 `TeaGathering`의 바깥에서 생성되었다면 큰 문제가 될 겁니다! 항목을 해당 배열에 푸시하여 _기존_ 객체를 변경할 수 있습니다. +만약 `cups` 변수나 `[]` 배열이 `TeaGathering`의 바깥에서 생성되었다면 큰 문제가 될 겁니다! 항목을 해당 배열에 `push`하여 _기존_ 객체를 변경할 수 있습니다. -하지만, `TeaGathering`안에 _동일한 렌더링중에_ 생성되었기 때문에 괜찮습니다. `TeaGathering`밖에 어떤 코드도 이 현상이 벌어졌다는 것조차 모를 겁니다. 이 현상은 **"지역 변형"** 이라 불립니다 - 이 컴포넌트의 작은 비밀 같은 거죠. +하지만 이것은 괜찮습니다. 왜냐하면 그것들은 `TeaGathering` 내부에서, 같은 렌더링 동안 생성했기 때문입니다. `TeaGathering` 외부의 어떤 코드도 이 현상이 발생했다는 사실을 알 수 없습니다. 이를 **"지역 변경"** 이라 하며, 이는 컴포넌트의 작은 비밀과도 같습니다. -## 부작용을 _일으킬 수 있는_ 지점 {/*where-you-_can_-cause-side-effects*/} +## 사이드 이펙트를 _일으킬 수 있는_ 지점 {/*where-you-_can_-cause-side-effects*/} -함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는, 어딘가에서, _무언가가_ 바뀌어야 합니다. 그것이 프로그래밍의 요점입니다! 이러한 변화들-화면을 업데이트하고, 애니메이션을 시작하고, 데이터를 변경하는 것을 **사이드 이펙트**라고 합니다. 렌더링중에 발생하는 것이 아니라 _"사이드에서,"_ 발생하는 현상입니다. +함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는, 어딘가에서, _무언가가_ 바뀌어야 합니다. 그것이 프로그래밍의 요점입니다! 화면을 업데이트하고, 애니메이션을 시작하고, 데이터를 변경하는 이러한 변화들을 **사이드 이펙트**라고 합니다. 렌더링중에 발생하는 것이 아니라 _"사이드에서"_ 발생하는 현상입니다. -React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 React가 일부 작업을 수행할 때 반응하는 기능입니다-예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.** +React에서, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 React가 일부 작업을 수행할 때 반응하는 기능입니다. 예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.** 다른 옵션을 모두 사용했지만 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없는 경우에도, 컴포넌트에서 [`useEffect`](/reference/react/useEffect) 호출을 사용하여 반환된 JSX에 해당 이벤트 핸들러를 연결할 수 있습니다. 이것은 React에게 사이드 이펙트가 허용될 때 렌더링 후 나중에 실행하도록 지시합니다. **그러나 이 접근 방식이 마지막 수단이 되어야 합니다.** @@ -205,7 +205,7 @@ React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon 순수 함수를 작성하려면 약간의 습관과 훈련이 필요합니다. 그러나 이건 또한 놀라운 기회를 열어줍니다. -* 컴포넌트는 다른 환경에서도 실행될 수 있습니다- 예를 들면 서버에서 말이죠! 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있습니다. +* 컴포넌트는 다른 환경에서도 실행될 수 있습니다. 예를 들면 서버에서 말이죠! 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있습니다. * 입력이 변경되지 않은 컴포넌트 [렌더링을 건너뛰어](/reference/react/memo) 성능을 향상시킬 수 있습니다. 순수 함수는 항상 동일한 결과를 반환하므로 캐시하기에 안전합니다. * 깊은 컴포넌트 트리를 렌더링하는 도중에 일부 데이터가 변경되는 경우 React는 오래된 렌더링을 완료하는 데 시간을 낭비하지 않고 렌더링을 다시 시작할 수 있습니다. 순수함은 언제든지 연산을 중단하는 것을 안전하게 합니다. @@ -216,12 +216,12 @@ React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon * 컴포넌트는 순수해야만 합니다. 이것은 두가지를 의미합니다. - * **자신의 일에 집중합니다.** 렌더링전에 존재했던 객체나 변수를 변경하지 않아야 합니다. - * **같은 입력, 같은 결과물.** 입력이 같을 경우, 컴포넌트는 항상 같은 JSX를 반환해야 합니다. + * **자신의 일에 집중합니다.** 렌더링 전에 존재했던 객체나 변수를 변경하지 않아야 합니다. + * **같은 입력, 같은 출력.** 입력이 같을 경우, 컴포넌트는 항상 같은 JSX를 반환해야 합니다. * 렌더링은 언제든지 발생할 수 있으므로 컴포넌트는 서로의 렌더링 순서에 의존하지 않아야 합니다. -* 컴포넌트가 렌더링을 위해 사용되는 입력을 변형해서는 안 됩니다. 여기에는 Props, 상태, 그리고 컨텍스트가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변환하는 대신 [상태를 "설정"](/learn/state-a-components-memory)하십시오. -* 반환하는 JSX에서 컴포넌트의 로직을 표현하기 위해 노력하십시오. "무언가를 변경"해야 할 경우 일반적으로 이벤트 핸들러에서 변경하고 싶을 것입니다. 마지막 수단으로 `useEffect`를 사용할 수 있습니다. -* 순수 함수를 작성하는 것은 약간의 연습이 필요하지만, React 패러다임의 힘을 풀어줍니다. +* 컴포넌트가 렌더링을 위해 사용하는 입력을 변경해서는 안됩니다. 여기에는 Props, State, Context가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변경하는 대신 [State를 "설정"](/learn/state-a-components-memory)하세요. +* 반환하는 JSX에서 컴포넌트의 로직을 표현하기 위해 노력하세요. "무언가를 변경"해야 할 경우 일반적으로 이벤트 핸들러에서 변경하고 싶을 것입니다. 마지막 수단으로 `useEffect`를 사용할 수 있습니다. +* 순수 함수를 작성하는 것은 약간의 연습이 필요하지만, React 패러다임의 힘을 발휘합니다. @@ -299,7 +299,7 @@ body > * { -`className`을 연산하고 렌더 출력에 포함해서 이 컴포넌트를 고칠 수 있습니다. +`className`을 연산하고 렌더링 출력에 포함해서 이 컴포넌트를 고칠 수 있습니다. @@ -360,7 +360,7 @@ body > * { -이 예에서는 사이드 이펙트(DOM 수정)는 전혀 필요하지 않았습니다. JSX만 반환하면 됩니다. +이 예시에서는 사이드 이펙트(DOM 수정)가 전혀 필요하지 않았습니다. JSX만 반환하면 됩니다. @@ -473,7 +473,7 @@ h1 { margin: 5px; font-size: 18px; } -문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점이다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다. +문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점입니다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다. 버그를 수정하려면 `currentPerson` 변수를 제거하세요. 대신 Props를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가해서 끝까지 전달해야 합니다. @@ -569,7 +569,7 @@ h1 { margin: 5px; font-size: 18px; } -React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 통신할 수 없습니다. 모든 커뮤니케이션은 프로퍼티를 통해 이루어져야 합니다. +React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 소통할 수 없습니다. 모든 소통은 프로퍼티를 통해 이루어져야 합니다. @@ -673,9 +673,9 @@ li { -시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변형이 있음을 암시합니다--엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄 만들도록 해줍니다. +시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변경이 있음을 암시합니다. 엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄 만들도록 해줍니다. -`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(프로퍼티!)에서 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 객체를 변경합니다. 이로 인해 버그가 발생하고 예측하기가 매우 어렵습니다.. +`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(Prop)에서 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 객체를 변경합니다. 이로 인해 버그가 발생하고 예측하기가 매우 어렵습니다. 가장 간단한 해결 방법은 배열을 전혀 건드리지 않고 "Create Story"를 별도로 렌더링하는 것입니다. @@ -853,9 +853,9 @@ li { -이 코드는 변경을 로컬로 유지하고 렌더링 함수를 순수하게 만듭니다. 그러나 여전히 조심해야 합니다. 예를 들어 배열의 기존 항목을 변경하려고 하면 해당 항목도 복사해야 합니다. +이 코드는 지역 변경으로 유지하고 렌더링 함수를 순수하게 만듭니다. 그러나 여전히 조심해야 합니다. 예를 들어 배열의 기존 항목을 변경하려고 하면 해당 항목도 복사해야 합니다. -배열에서 어떤 연산이 변형을 일으키는지, 어떤 작업이 그렇지 않은지를 기억하는 것이 유용합니다. 예를 들어 `push`, `pop`, `reverse` 그리고 `sort`는 기존 배열을 변경시키지만 `slice`, `filter`, 그리고 `map`은 새로운 배열을 만듭니다. +배열에서 어떤 연산이 변경을 일으키는지, 어떤 작업이 그렇지 않은지를 기억하는 것이 유용합니다. 예를 들어 `push`, `pop`, `reverse`, `sort`는 기존 배열을 변경하지만 `slice`, `filter`, `map`은 새로운 배열을 만듭니다. diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index f237cbcf1..983fbd188 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,38 +1,38 @@ --- -title: React Developer Tools +title: React 개발자 도구 --- -React Developer Tools를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [props](/learn/passing-props-to-a-component)와 [state](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다. +React 개발자 도구를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [Props](/learn/passing-props-to-a-component)와 [State](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다. -* React Developer Tools 설치 방법 +* React 개발자 도구 설치 방법 ## 브라우저 확장 프로그램 {/*browser-extension*/} -React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React Developer Tools 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다. +React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React 개발자 도구 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다. * [**Chrome**용으로 설치](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [**Firefox**용으로 설치](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) * [**Edge**용으로 설치](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -설치가 완료되면 **React로 구축된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다. +설치가 완료된 후 **React로 빌드된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다. -![React Developer Tools extension](/images/docs/react-devtools-extension.png) +![React 개발자 도구 확장 프로그램](/images/docs/react-devtools-extension.png) ### Safari 및 기타 브라우저 {/*safari-and-other-browsers*/} -다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools)를 npm package로 설치해야 합니다. +다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools)를 npm 패키지로 설치해야 합니다. ```bash # Yarn yarn global add react-devtools -# Npm +# npm npm install -g react-devtools ``` @@ -41,7 +41,7 @@ npm install -g react-devtools react-devtools ``` -다음으로 당신의 웹 사이트의 ``의 `