Replies: 1 comment
-
저도 규칙을 끄는 쪽이 더 좋지 않을까 하는 생각입니다! 저도 Tab 컴포넌트를 구현하면서 동일한 경고를 확인하고 value로 내려주는 객체를 useMemo로 감싸두었는데, 상태가 매번 바뀌어서 메모이제이션을 할 필요가 없는 값인데도 ESLint 룰 때문에 적용해줘야하는 게 불필요하다는 생각이 들었었어요. 그리고 리액트 베타 문서에서 useMemo를 모든 곳에서 써야하는지에 관해 설명하는 글을 봤었는데 useMemo를 적용하면 유용할 수 있는 몇몇 케이스를 제외하고는 딱히 이점이 없다고 말하고 있고, 메모이제이션을 하지 않고도 코드를 개선할 수 있는 여러 방안을 함께 제시하고 있는 것을 보아 해당 규칙을 적용하여 useMemo 사용을 강제할 이유는 없지 않을까 싶습니다! |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
ESLint 의 jsx-no-constructed-context-values 규칙의 사용 여부에 대해 논의를 하고 싶어 디스커션을 열게 되었습니다.
해당 규칙은 Context API를 사용할 때 렌더링을 일으킬 수 있는 불안정한 값으로 인한 무분별한 렌더링을 방지하기 위해 Context로 공유할 데이터를 useMemo 등을 사용하여 메모이제이션 하는 것을 권장하는 규칙입니다.
예를 들어 위와 같이 여러 값을 values 로 묶어 Provider 로 전달하려고 하면 에러를 띄웁니다!
공식 문서에서 제안하는 해결 방법은 아래와 같이 useMemo 로 넘겨주려는 값을 감싸는 방법이 있습니다.
지금까지는 Context API의 해당 Context를 사용하는 모든 컴포넌트가 무분별하게 렌더링 될 수도 있다는 단점을 개선 하는 방법이라 생각해서 useMemo를 사용하는데 거리낌 없어 이번 RadioGroup 컴포넌트를 를 구현 할 때도 사용한 방식이었는데요.
해당 코드에 대해 파크께서 PR에 남겨주신 리뷰를 보고 불필요한 최적화일 수 있다는 걸 깨달았습니다!
그래서 useMemo 를 없애고 싶지만 ESLint가 자꾸 경고를 줘서ㅜ _ㅜ) 해당 규칙의 사용 여부에 대해 논의를 해보고 싶습니다!
물론 또다른 해결 방법으로는 넘겨줘야 하는 값이 많으면 useReducer를 활용하거나 아니면 파크께서 PR에서 제안 해주신대로 불필요한 value를 줄이는 방향도 있지만(현재 그 방향으로 개선 작업 중입니다 ^0^)
useReducer를 쓰기엔 과하고, 그런데 또 매번 바뀌는 상태 값들을 내려줘서 메모이제이션 할 필요가 없는 경우가 있을 수 있으니
저는 해당 방식을 강제하기보단 경고 처리(
warn
)나 그냥 규칙을 꺼서(off
) 각자의 판단에 맡기는 게 좋다고 생각합니다.어떻게 생각하시나요? @jindonyy @healtheloper @mina-gwak
Beta Was this translation helpful? Give feedback.
All reactions