You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
18
18
19
-
-[React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself) - With React Armory, you can learn React without the buzzwords.
19
+
-[Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords.
20
20
21
21
-[Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) - Free course for React newbies and those looking to get a better understanding of React fundamentals.
Copy file name to clipboardExpand all lines: content/docs/how-to-contribute.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ Public API를 변경하거나 구현을 간단하게 변경하려 할 때 [이
70
70
71
71
풀 리퀘스트를 처음 해보시나요? 무료 영상 시리즈를 통해 다음과 같이 기여하는 방법을 배울 수도 있습니다.
72
72
73
-
**[GitHub에서 오픈 소스 프로젝트에 기여하는 방법](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)**
73
+
**[GitHub에서 오픈 소스 프로젝트에 기여하는 방법](https://app.egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)**
74
74
75
75
처음 발을 디딜 때 기여 과정에 익숙해질 수 있도록 비교적 영향력이 적은 버그를 포함하는 **[good first issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"good+first+issue")** 목록은 기여 입문에 최적입니다.
76
76
@@ -88,7 +88,7 @@ Public API를 변경하거나 구현을 간단하게 변경하려 할 때 [이
88
88
2. 저장소 루트에서 `yarn` 명령을 실행합니다.
89
89
3. 버그를 수정했거나 테스트가 필요한 코드를 추가했다면 테스트를 추가해 주세요.
90
90
4. 테스트가 통과하는지 확인해 주세요(`yarn test`). Tip : `yarn test --watch TestName` 명령은 개발할 때 도움이 됩니다.
91
-
5.`yarn test-prod` 명령을 실제 환경에서 테스트하기 위해 실행합니다. 이는 `yarn test`와 동일한 옵션을 지원합니다.
91
+
5.`yarn test --prod` 명령을 실제 환경에서 테스트하기 위해 실행합니다.
92
92
6. 디버거가 필요한 경우 `yarn debug-test --watch TestName` 을 실행하고 `chrome://inspect`을 열어 "Inspect"를 누르세요.
93
93
7.[prettier](https://github.com/prettier/prettier)로 코드를 포맷하세요. (`yarn prettier`).
94
94
8. 코드를 린트하세요 (`yarn lint`). Tip: `yarn linc` 는 변경된 파일만 확인할 수 있습니다.
@@ -117,7 +117,7 @@ React 저장소를 복사한 후 yarn 명령을 사용하면 다음과 같은
117
117
*`yarn test` 는 모든 테스트를 실행합니다.
118
118
*`yarn test --watch` 대화형 테스트 watcher를 실행합니다.
119
119
*`yarn test <pattern>` 은 일치하는 파일 이름으로 테스트를 실행합니다.
120
-
*`yarn test-prod` 는 실제 환경에서 테스트를 실행합니다. `yarn test`와 같은 옵션을 지원합니다.
120
+
*`yarn test --prod` 는 실제 환경에서 테스트를 실행합니다.
121
121
*`yarn debug-test` 는 `yarn test`와 비슷하지만, 디버거를 활용합니다. `chrome://inspect`를 열고 "Inspect"를 누르세요.
122
122
*`yarn flow` 는 [Flow](https://flowtype.org/) 타입검사를 실행합니다.
123
123
*`yarn build` 는 모든 패키지와 함께 `build` 폴더를 만듭니다.
@@ -135,7 +135,7 @@ npm을 통해 React를 사용하고 있다면, 의존성에서 `react`와 `react
Copy file name to clipboardExpand all lines: content/docs/reconciliation.md
+16-3
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리
27
27
28
28
두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축합니다. `<a>`에서 `<img>`로, `<Article>`에서 `<Comment>`로, 혹은 `<Button>`에서 `<div>`로 바뀌는 것 모두 트리 전체를 재구축하는 경우입니다.
29
29
30
-
트리를 버릴 때 이전 DOM 노드들은 모두 파괴됩니다. 컴포넌트 인스턴스는 `componentWillUnmount()`가 실행됩니다. 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입됩니다. 그에 따라 컴포넌트 인스턴스는 `componentWillMount()`가 실행되고 `componentDidMount()`가 이어서 실행됩니다. 이전 트리와 연관된 모든 state는 사라집니다.
30
+
트리를 버릴 때 이전 DOM 노드들은 모두 파괴됩니다. 컴포넌트 인스턴스는 `componentWillUnmount()`가 실행됩니다. 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입됩니다. 그에 따라 컴포넌트 인스턴스는 `UNSAFE_componentWillMount()`가 실행되고 `componentDidMount()`가 이어서 실행됩니다. 이전 트리와 연관된 모든 state는 사라집니다.
31
31
32
32
루트 엘리먼트 아래의 모든 컴포넌트도 언마운트되고 그 state도 사라집니다. 예를 들어, 아래와 같은 비교가 일어나면,
33
33
@@ -43,6 +43,12 @@ React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리
43
43
44
44
이전 `Counter`는 사라지고, 새로 다시 마운트가 될 것입니다.
45
45
46
+
>주의
47
+
>
48
+
>아래 메서드들은 레거시이며 새로 작성하는 코드에서는 [피해야 합니다.](/blog/2018/03/27/update-on-async-rendering.html)
49
+
>
50
+
>-`UNSAFE_componentWillMount()`
51
+
46
52
### DOM 엘리먼트의 타입이 같은 경우 {#dom-elements-of-the-same-type}
47
53
48
54
같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다. 예를 들어,
@@ -69,9 +75,16 @@ DOM 노드의 처리가 끝나면, React는 이어서 해당 노드의 자식들
69
75
70
76
### 같은 타입의 컴포넌트 엘리먼트 {#component-elements-of-the-same-type}
71
77
72
-
컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지됩니다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신합니다. 이때 해당 인스턴스의 `componentWillReceiveProps()`와 `componentWillUpdate()`를 호출합니다.
78
+
컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지됩니다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신합니다. 이때 해당 인스턴스의 `UNSAFE_componentWillReceiveProps()`, `UNSAFE_componentWillUpdate()`, `componentDidUpdate`를 호출합니다.
79
+
80
+
다음으로 `render()` 메서드가 호출되고 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리합니다.
73
81
74
-
다음으로 `render()` 메소드가 호출되고 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리합니다.
82
+
>주의
83
+
>
84
+
>아래 메서드들은 레거시이며 새로 작성하는 코드에서는 [피해야 합니다.](/blog/2018/03/27/update-on-async-rendering.html)
0 commit comments