React v18 마이그레이션 #771

sungik-choi · 2022-04-29T10:44:55Z

Summary

Close #760

react, react-dom 라이브러리를 18.1.0 버전으로 마이그레이션하고, 연관된 다른 라이브러리도 함께 변경합니다.

Details

React

버전 업데이트

react, react-dom 최신 버전 업데이트
peer dependency 수정(^16.8.0 || ^17.0.0 || ^18.0.0)

타입 변경 사항 마이그레이션

[react] React 18 types DefinitelyTyped/DefinitelyTyped#56210 의 변경사항을 적용합니다(fd1d24c).

`useId` 훅 구현 변경

useId facebook/react#22644
v18에서 react에 useId 훅이 새롭게 추가되어, 내부 구현에 사용하도록 변경합니다.

Storybook

react v18을 지원하는 최신 pre-released 버전으로 업데이트합니다.
@storybook/addon-docs 라이브러리에서 사용하는 @mdx-js/react 라이브러리가 react v18을 지원하는 최신 버전(>= 2.0.0)으로 업데이트가 되어 있지 않아서, 직접 legacy-peer-deps 옵션으로 설치합니다.

Testing Library

feat: Add support for React 18 testing-library/react-testing-library#1031
react v18에서 기존의 ReactDOM.render() API는 더 이상 제공하지 않습니다. createRoot API로 마이그레이션 해야하며(링크), testing-library 최신 버전이 이를 지원합니다(Support for React 18 testing-library/react-testing-library#509).
@testing-library/react-hooks 은 아직 react v18 대응이 안되어있습니다. feat: Add renderHook testing-library/react-testing-library#991 에서 구현된 renderHook API를 사용하도록 변경합니다.
@testing-library/user-event 라이브러리가 v14 버전으로 업데이트되며 변경된 사항을 적용했습니다(c7c9ebb).
상태가 변경되지만 act() 메서드가 사용되지 않아 실패하는 테스트 케이스를 올바르게 수정했습니다(c91cca6).

Styled Components

react v18을 업데이트하며 테스트 환경에서 Invalid hook call console error가 발생합니다. 업데이트로 해결했습니다(626f271).

etc.

react-textarea-autosize : 기존에 package.json에 명시되어있지 않았습니다(다른 패키지로부터 import해서 사용). 아직 react v18을 지원하지 않으므로 legacy-peer-deps 옵션으로 설치했습니다.
사용하지 않는 @testing-library/react-hooks 패키지 제거
간단한 스타일 수정
잘못 generated된 GiftIcon 수정
스냅샷 업데이트

Browser Compatibility

OS / Engine 호환성을 반드시 확인해주세요.

Windows

Chrome - Blink
Edge - Blink
Firefox - Gecko (Option)

macOS

Chrome - Blink
Edge - Blink
Safari - WebKit
Firefox - Gecko (Option)

Test

채널 데스크에 로컬 설치하여 테스트

References

React v18.0 마이그레이션 #760

* peer dependencies 업데이트 * storybook/*: 베타 버전부터 react v18 지원 * mdx-js/react: 라이브러리가 v2.0.0부터 react18 지원하나, storybook/addon-docs에서 하위 버전을 사용해서 빌드 오류가 발생하므로 legacy-peer-deps 옵션으로 설치 * react-textarea-autosize: 기존에 package.json에 명시되어있지 않았음. 다른 패키지에서 import해서 사용하고 있어서 재설치. react v18을 지원하지 않으므로 legacy-peer-deps 옵션으로 설치

react v18에서 ReactDOM.render 메서드가 createRoot로 변경. 이를 위해 라이브러리 업데이트

…틸 함수 생성 testing-library/react-testing-library#991

일관성을 위함. (cf. https://testing-library.com/docs/react-testing-library/api/#act)

테스트 시 Invalid hook call 콘솔 에러를 발생하지 않게 하기 위함

https://testing-library.com/docs/user-event/intro

…hildren prop 추가 DefinitelyTyped/DefinitelyTyped#56210

Related PR: channel-io#753

codecov · 2022-04-29T10:47:23Z

Codecov Report

Merging #771 (bbaaa00) into next-v1 (505f710) will decrease coverage by 0.34%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           next-v1     #771      +/-   ##
===========================================
- Coverage    65.06%   64.72%   -0.35%     
===========================================
  Files          190      190              
  Lines         2774     2767       -7     
  Branches       771      770       -1     
===========================================
- Hits          1805     1791      -14     
- Misses         851      860       +9     
+ Partials       118      116       -2

Impacted Files	Coverage Δ
...omponents/Forms/Inputs/TextArea/TextArea.styled.ts	`100.00% <ø> (ø)`
src/layout/LayoutProvider.tsx	`100.00% <ø> (ø)`
src/hooks/useId.ts	`100.00% <100.00%> (ø)`
src/utils/testUtils.tsx	`100.00% <100.00%> (ø)`
src/foundation/ThemeVars.ts	`14.28% <0.00%> (-71.43%)`	⬇️
src/foundation/GlobalStyle.tsx	`20.00% <0.00%> (-40.00%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fa40be4...bbaaa00. Read the comment docs.

aooen

18.1.0이 올라왔네요 😄

sungik-choi · 2022-04-29T10:49:14Z

커버러지가 떨어지다니...🥲

inhibitor1217 · 2022-05-02T05:40:11Z

src/hooks/useId.ts

-    if (idProp) { return }
-    setId(generateId())
-  }, [idProp])
+  const id = useIdentifier()


aooen · 2022-05-04T03:42:56Z

커버러지가 떨어지다니...🥲

커버리지 무시하고 머지해도 될듯 합니다

guswnsxodlf · 2022-05-04T05:07:34Z

src/components/Icon/generated/GiftIcon.tsx

@@ -16,10 +16,10 @@ function SvgGifIcon(props: SVGProps<SVGSVGElement>) {
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M15.5 2C13.567 2 12 3.567 12 5.5C12 3.567 10.433 2 8.5 2C6.567 2 5 3.567 5 5.5C5 6.0368 5.12085 6.54537 5.33682 7H5C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V9C21 7.89543 20.1046 7 19 7H18.6632C18.8792 6.54537 19 6.0368 19 5.5C19 3.567 17.433 2 15.5 2ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5V7H15.5ZM8.5 7H10V5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM5 9L5 19H10V9H5ZM14 9H19V19H14V9Z" 
+        d="M15.5 2A3.5 3.5 0 0 0 12 5.5 3.5 3.5 0 1 0 5.337 7H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-.337A3.5 3.5 0 0 0 15.5 2Zm0 5A1.5 1.5 0 1 0 14 5.5V7h1.5Zm-7 0H10V5.5A1.5 1.5 0 1 0 8.5 7ZM5 9v10h5V9H5Zm9 0h5v10h-5V9Z"


이 수정은 어떤건가요?

icon generate 스크립트를 돌리면 자동으로 바뀝니다. 현재 next-v1 브랜치에 잘못된 아이콘이 들어가있는 거 같아요.
#753 보면 컴포넌트명이 GifIcon 입니다

guswnsxodlf · 2022-05-04T05:08:07Z

src/hooks/useId.ts

-    if (idProp) { return }
-    setId(generateId())
-  }, [idProp])
+  const id = useIdentifier()


ch-builder · 2022-05-04T05:39:51Z

🎉 This PR is included in version 1.0.0-next-v1.122 🎉

The release is available on:

Your semantic-release bot 📦🚀

sungik-choi added 14 commits April 29, 2022 15:59

chore(deps): @testing-library/* 패키지 업데이트

cd379a8

react v18에서 ReactDOM.render 메서드가 createRoot로 변경. 이를 위해 라이브러리 업데이트

fix(test-utils): renderHook 함수를 testing-library/react 라이브러리에서 사용하도록 유…

dea4610

…틸 함수 생성 testing-library/react-testing-library#991

refactor(tests): act 메서드를 testing-library/react 라이브러리로부터 사용하도록 통일

7c5a94c

일관성을 위함. (cf. https://testing-library.com/docs/react-testing-library/api/#act)

chore(deps): styled-components^5.3.5 업데이트

626f271

테스트 시 Invalid hook call 콘솔 에러를 발생하지 않게 하기 위함

refactor(test): user-event^14 마이그레이션

c7c9ebb

https://testing-library.com/docs/user-event/intro

test(snapshot): 스냅샷 업데이트

f41c510

test: react state가 변하는 focus 메서드를 act 메서드로 wrapping

c91cca6

refactor(form-control): react v18의 React.FunctionComponent 타입에서 제거된 c…

fd1d24c

…hildren prop 추가 DefinitelyTyped/DefinitelyTyped#56210

refactor(tab-action): 타입 충돌 해결

bbb34a7

style(text-area): 여백 추가

1cc1ba0

chore(deps): 사용하지 않는 @testing-library/react-hooks 패키지 제거

e9bb35b

fix(icons): 잘못 생성된 GiftIcon 올바르게 수정

94ccad2

Related PR: channel-io#753

feat(use-id): react에 내장된 useId 훅을 사용하도록 구현 변경

bbaaa00

sungik-choi added the enhancement Issues or PR related to making existing features better label Apr 29, 2022

sungik-choi self-assigned this Apr 29, 2022

sungik-choi requested review from inhibitor1217, quino0627 and aooen April 29, 2022 10:45

aooen approved these changes Apr 29, 2022

View reviewed changes

inhibitor1217 approved these changes May 2, 2022

View reviewed changes

inhibitor1217 approved these changes May 4, 2022

View reviewed changes

guswnsxodlf approved these changes May 4, 2022

View reviewed changes

sungik-choi merged commit 883f173 into channel-io:next-v1 May 4, 2022

sungik-choi deleted the enhance/react-v18 branch May 4, 2022 05:29

ch-builder added the released on @next-v1 label May 4, 2022

sungik-choi added this to the next-v2.0.0 milestone May 18, 2022

sungik-choi mentioned this pull request Jun 10, 2022

Enhance the build config #825

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React v18 마이그레이션 #771

React v18 마이그레이션 #771

sungik-choi commented Apr 29, 2022 •

edited

codecov bot commented Apr 29, 2022

aooen left a comment

sungik-choi commented Apr 29, 2022

inhibitor1217 May 2, 2022

guswnsxodlf May 4, 2022

aooen commented May 4, 2022

guswnsxodlf May 4, 2022

sungik-choi May 4, 2022 •

edited

guswnsxodlf May 4, 2022

ch-builder commented May 4, 2022

React v18 마이그레이션 #771

React v18 마이그레이션 #771

Conversation

sungik-choi commented Apr 29, 2022 • edited

Summary

Details

React

버전 업데이트

타입 변경 사항 마이그레이션

useId 훅 구현 변경

Storybook

Testing Library

Styled Components

etc.

Browser Compatibility

Windows

macOS

Test

References

codecov bot commented Apr 29, 2022

Codecov Report

aooen left a comment

Choose a reason for hiding this comment

sungik-choi commented Apr 29, 2022

inhibitor1217 May 2, 2022

Choose a reason for hiding this comment

guswnsxodlf May 4, 2022

Choose a reason for hiding this comment

aooen commented May 4, 2022

guswnsxodlf May 4, 2022

Choose a reason for hiding this comment

sungik-choi May 4, 2022 • edited

Choose a reason for hiding this comment

guswnsxodlf May 4, 2022

Choose a reason for hiding this comment

ch-builder commented May 4, 2022

sungik-choi commented Apr 29, 2022 •

edited

`useId` 훅 구현 변경

sungik-choi May 4, 2022 •

edited