Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React v18 마이그레이션 #771

Merged
merged 14 commits into from
May 4, 2022

Conversation

sungik-choi
Copy link
Contributor

@sungik-choi sungik-choi commented Apr 29, 2022

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)

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

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

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

* 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로 변경. 이를 위해 라이브러리 업데이트
테스트 시 Invalid hook call 콘솔 에러를 발생하지 않게 하기 위함
@sungik-choi sungik-choi added the enhancement Issues or PR related to making existing features better label Apr 29, 2022
@sungik-choi sungik-choi self-assigned this Apr 29, 2022
@codecov
Copy link

codecov bot commented Apr 29, 2022

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.

Copy link
Contributor

@aooen aooen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

18.1.0이 올라왔네요 😄

@sungik-choi
Copy link
Contributor Author

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

if (idProp) { return }
setId(generateId())
}, [idProp])
const id = useIdentifier()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오호

@aooen
Copy link
Contributor

aooen commented May 4, 2022

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

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

@@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 수정은 어떤건가요?

Copy link
Contributor Author

@sungik-choi sungik-choi May 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (idProp) { return }
setId(generateId())
}, [idProp])
const id = useIdentifier()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오호

@sungik-choi sungik-choi merged commit 883f173 into channel-io:next-v1 May 4, 2022
@sungik-choi sungik-choi deleted the enhance/react-v18 branch May 4, 2022 05:29
@ch-builder
Copy link
Contributor

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

The release is available on:

Your semantic-release bot 📦🚀

@sungik-choi sungik-choi added this to the next-v2.0.0 milestone May 18, 2022
@sungik-choi sungik-choi mentioned this pull request Jun 10, 2022
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues or PR related to making existing features better
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React v18.0 마이그레이션
5 participants