Update old corrections

velopert · velopert · commit 8fee8fce82d1 · 2020-06-23T02:07:13.000+09:00
diff --git a/_old_corrections/개정판-1쇄.md b/_old_corrections/개정판-1쇄.md
@@ -12,6 +12,28 @@ $ yarn config set prefix ~/.yarn
 $ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
 ```
 
+## 2.3.2 업데이트 (pg.41)
+
+3월 11일부터 create-react-app 으로 새로 만든 프로젝트에는 다음과 같이 `StrictMode`가 적용되어있습니다. `StrictMode`는 리액트 프로젝트에서 레거시 기능을 사용하지 않도록 검사를 해줍니다. 자세한 내용은 https://ko.reactjs.org/docs/strict-mode.html 에서 참고 가능합니다.
+
+
+```diff
+ReactDOM.render(
++  <React.StrictMode>
+    <App />
++  </React.StrictMode>,
+  document.getElementById('root')
+);
+```
+
+
+### 참고 박스 추가:
+
+> **React.StrictMode는 무엇인가요?**
+> `React.StrictMode`는 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능입니다. 이를 사용하면 문자열 `ref`, `componentWillMount` 등 나중에는 완전히 사라지게 될 옛날 기능들을 사용했을 때 경고를 출력합니다. 
+>
+> 이 책이 작성될 시점 (2019년 8월)에는 해당 옵션이 기본적으로 적용되어있지 않았었기 때문에, 앞으로 이 책에 나타나게 될 index.js에 `React.StrictMode`가 적용되어있지 않으니 참고하세요.
+
 ## 3.4.1 (pg. 105)
 
 컴포넌트가 상속받고 있는데, "상속하는" 이라고 잘못 설명하여 이를 수정합니다.
@@ -31,6 +53,14 @@ $ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
 + SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면...
 ```
 
+## 7.3.2 내용 업데이트
+
+### 참고 박스 추가:
+
+> **React.StrictMode가 적용되어 있으면 일부 라이브사이클이 두번씩 호출됩니다.**
+>
+> 2.3.2에서 언급했었던 `React.StrictMode`가 적용되어 있으면 일부 라이브사이클이 두 번씩 호출됩니다. 개발 환경에서만 두 번씩 호출이 되며 프로덕션 환경에서는 정상적으로 호출되니 안심하세요. 만약에 책에서 나오는 스크린샷과 동일한 결과물을 보시고 싶다면, index.js를 열어서 `React.StrictMode`를 제거하고 `App` 컴포넌트만 렌더링 하시면 됩니다.
+
 ## 8.2.3 (pg. 199) - 개선사항
 
 `useEffect`를 사용하는 부분의 deps 배열이 비어있어서 ESLint 경고가 나타납니다. 이 경고를 없애기 위하여 deps 배열에 name 을 넣어주세요.
@@ -47,6 +77,26 @@ useEffect(() => {
 + }, [name]);
 ```
 
+## 8.5 useCallback 설명 수정
+
+`useCallback`에 대한 설명이 적절치 않아 수정합니다. 개정판을 작성할 당시 Hooks가 나온지 얼마 안됐을때 작성된거라, 좋지 못한 설명이 들어갔던 것 같습니다. 사실 함수는 매번 생성이 되는거고 이전에 만든 함수를 재사용 할 수 있는 것에 의미를 둬야 하는 Hooks인데, 책에서 설명을 할 때 함수를 "필요할 때만 생성"한다고 표현했었습니다. 추가적으로, `useMemo`와 비슷하지만 사실상 동일한 코드가 아니므로 해당 설명을 제거하였습니다.
+
+무조건 습관적으로 `useCallback`을 매번 사용하는 것 보다, 실질적으로 최적화를 할 수 있는 상황에서만 사용하는 것이 좋습니다.
+
+다음 링크를 읽어보시면 이해에 도움이 될 것입니다.
+
+- https://kentcdodds.com/blog/usememo-and-usecallback
+- 번역: https://ideveloper2.dev/blog/2019-06-14--when-to-use-memo-and-use-callback/
+
+이에 따라 책의 내용을 조금 더 수정해야 되는데 이건 그 다음 개정판에서 해야 될 것 같습니다.
+
+1. pg.208  내용 수정
+
+```diff
+- 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다.
++ 이 Hook을 사용하면 만들어놨던 함수를 재사용할 수 있습니다.
+```
+
 ## 9.2.2 (pg. 230, 231)
 
 `sass-loader`가 업데이트 됨에 따라 설정 방법이 바뀌었습니다. `includePaths`를 설정 할 때 `sassOptions` 객체 안에 넣어서 설정하셔야 합니다.
@@ -134,6 +184,31 @@ const update = produce(draft => {
 });
 ```
 
+## 13.4 오탈자
+
+설명에서는 `/profiles` 라고 적혀있지만 실제 코드에서는 `/profile` 를 사용하고 있습니다. 따라서, 기존의 설명들을 모두 수정합니다.
+
+1. pg.335
+```diff
+- 파라미터 예시: /profiles/velopert
++ 파라미터 예시: /profile/velopert
+```
+
+2. pg. 336
+```diff
+- 이번에 사용할 path 규칙에는 /profiles/:username이라고 넣어 주면 됩니다.
++ 이번에 사용할 path 규칙에는 /profile/:username이라고 넣어 주면 됩니다.
+```
+
+## 13.6.4 오탈자 (pg. 351)
+
+불필요한 active 키워드가 포함되어있습니다.
+
+```diff
+- <NavLink activeStyle={activeStyle} to="/profiles/velopert" active>
++ <NavLink activeStyle={activeStyle} to="/profiles/velopert">
+```
+
 ## 14.1.3 (pg. 359)
 
 예시 코드에서 `increase`가 `increment`로 잘못 들어가서 이를 모두 `increase`로 변경합니다.
@@ -445,6 +520,15 @@ input {
   }, [dispatch, location.search]);
 ```
 
+## 26.2.3 코드 수정 (pg. 864)
+
+업데이트 할 때 `sanitizeOption`이 빠져서 태그가 모두 사라지는 현상이 발생합니다. 이를 고치기 위하여 update API에도 `sanitizeHtml` 을 사용 할 때 `sanitizeOption` 을 두번째 파라미터로 넣어주어야 합니다.
+
+```diff
+-   nextData.body = sanitizeHtml(nextData.body);
++   nextData.body = sanitizeHtml(nextData.body, sanitizeOption);
+```
+
 ## 26.2.4 (pg. 869 - 870)
 
 `username`을 `match.params` 에서 조회해야 하는데 `query`에서 조회를 하는 실수가 있었습니다. `match.params` 에서 불러오도록 수정합니다.
diff --git a/_old_corrections/개정판-2쇄.md b/_old_corrections/개정판-2쇄.md
@@ -5,6 +5,28 @@
 
 [개정판-1쇄.md](https://github.com/velopert/learning-react/blob/master/_old_corrections/%EA%B0%9C%EC%A0%95%ED%8C%90-1%EC%87%84.md)
 
+## 2.3.2 업데이트 (pg.41)
+
+3월 11일부터 create-react-app 으로 새로 만든 프로젝트에는 다음과 같이 `StrictMode`가 적용되어있습니다. `StrictMode`는 리액트 프로젝트에서 레거시 기능을 사용하지 않도록 검사를 해줍니다. 자세한 내용은 https://ko.reactjs.org/docs/strict-mode.html 에서 참고 가능합니다.
+
+
+```diff
+ReactDOM.render(
++  <React.StrictMode>
+    <App />
++  </React.StrictMode>,
+  document.getElementById('root')
+);
+```
+
+
+### 참고 박스 추가:
+
+> **React.StrictMode는 무엇인가요?**
+> `React.StrictMode`는 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능입니다. 이를 사용하면 문자열 `ref`, `componentWillMount` 등 나중에는 완전히 사라지게 될 옛날 기능들을 사용했을 때 경고를 출력합니다. 
+>
+> 이 책이 작성될 시점 (2019년 8월)에는 해당 옵션이 기본적으로 적용되어있지 않았었기 때문에, 앞으로 이 책에 나타나게 될 index.js에 `React.StrictMode`가 적용되어있지 않으니 참고하세요.
+
 ## 3.4.1 (pg. 105) 개선
 
 컴포넌트가 상속받고 있는데, "상속하는" 이라고 잘못 설명하여 이를 수정합니다.
@@ -15,6 +37,36 @@
 - 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의...
 ```
 
+## 7.3.2 내용 업데이트
+
+### 참고 박스 추가:
+
+> **React.StrictMode가 적용되어 있으면 일부 라이브사이클이 두번씩 호출됩니다.**
+>
+> 2.3.2에서 언급했었던 `React.StrictMode`가 적용되어 있으면 일부 라이브사이클이 두 번씩 호출됩니다. 개발 환경에서만 두 번씩 호출이 되며 프로덕션 환경에서는 정상적으로 호출되니 안심하세요. 만약에 책에서 나오는 스크린샷과 동일한 결과물을 보시고 싶다면, index.js를 열어서 `React.StrictMode`를 제거하고 `App` 컴포넌트만 렌더링 하시면 됩니다.
+
+
+
+## 8.5 useCallback 설명 수정
+
+`useCallback`에 대한 설명이 적절치 않아 수정합니다. 개정판을 작성할 당시 Hooks가 나온지 얼마 안됐을때 작성된거라, 좋지 못한 설명이 들어갔던 것 같습니다. 사실 함수는 매번 생성이 되는거고 이전에 만든 함수를 재사용 할 수 있는 것에 의미를 둬야 하는 Hooks인데, 책에서 설명을 할 때 함수를 "필요할 때만 생성"한다고 표현했었습니다. 추가적으로, `useMemo`와 비슷하지만 사실상 동일한 코드가 아니므로 해당 설명을 제거하였습니다.
+
+무조건 습관적으로 `useCallback`을 매번 사용하는 것 보다, 실질적으로 최적화를 할 수 있는 상황에서만 사용하는 것이 좋습니다.
+
+다음 링크를 읽어보시면 이해에 도움이 될 것입니다.
+
+- https://kentcdodds.com/blog/usememo-and-usecallback
+- 번역: https://ideveloper2.dev/blog/2019-06-14--when-to-use-memo-and-use-callback/
+
+이에 따라 책의 내용을 조금 더 수정해야 되는데 이건 그 다음 개정판에서 해야 될 것 같습니다.
+
+1. pg.208  내용 수정
+
+```diff
+- 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다.
++ 이 Hook을 사용하면 만들어놨던 함수를 재사용할 수 있습니다.
+```
+
 ## 9.2.2 (pg. 230, 231) 업데이트
 
 `sass-loader`가 업데이트 됨에 따라 설정 방법이 바뀌었습니다. `includePaths`를 설정 할 때 `sassOptions` 객체 안에 넣어서 설정하셔야 합니다.
@@ -102,6 +154,32 @@ const update = produce(draft => {
 });
 ```
 
+## 13.4 오탈자
+
+설명에서는 `/profiles` 라고 적혀있지만 실제 코드에서는 `/profile` 를 사용하고 있습니다. 따라서, 기존의 설명들을 모두 수정합니다.
+
+1. pg.335
+```diff
+- 파라미터 예시: /profiles/velopert
++ 파라미터 예시: /profile/velopert
+```
+
+2. pg. 336
+```diff
+- 이번에 사용할 path 규칙에는 /profiles/:username이라고 넣어 주면 됩니다.
++ 이번에 사용할 path 규칙에는 /profile/:username이라고 넣어 주면 됩니다.
+```
+
+
+## 13.6.4 오탈자 (pg. 351)
+
+불필요한 active 키워드가 포함되어있습니다.
+
+```diff
+- <NavLink activeStyle={activeStyle} to="/profiles/velopert" active>
++ <NavLink activeStyle={activeStyle} to="/profiles/velopert">
+```
+
 ## 14.1.3 (pg. 359) 오탈자
 
 예시 코드에서 `increase`가 `increment`로 잘못 들어가서 이를 모두 `increase`로 변경합니다.
@@ -293,6 +371,15 @@ import User from '../../models/user';
   }, [dispatch, location.search]);
 ```
 
+## 26.2.3 코드 수정 (pg. 864)
+
+업데이트 할 때 `sanitizeOption`이 빠져서 태그가 모두 사라지는 현상이 발생합니다. 이를 고치기 위하여 update API에도 `sanitizeHtml` 을 사용 할 때 `sanitizeOption` 을 두번째 파라미터로 넣어주어야 합니다.
+
+```diff
+-   nextData.body = sanitizeHtml(nextData.body);
++   nextData.body = sanitizeHtml(nextData.body, sanitizeOption);
+```
+
 ## 26.2.4 (pg. 869 - 870) 실수
 
 `username`을 `match.params` 에서 조회해야 하는데 `query`에서 조회를 하는 실수가 있었습니다. `match.params` 에서 불러오도록 수정합니다.
