https://facebook.com/groups/graphql-kr logo
Join Slack
Powered by
This message was deleted.
# 질문
s
This message was deleted.
a
{...props} 위쪽의 4개 데이터 때문에 완전히 분리를 할 수가 없는데요, 어떻게 하면 좋을까요? 지금은 Context 를 써야 하나 고민중입니다
u
저 같은 경우는 저 4개 props를 리턴하는 커스텀 훅을 만들어서 부모 컴포넌트에서 호출한 뒤에 커스텀 훅이 리턴한 props를 자식 컴포넌트에게 주입시켜서 부모 컴포넌트에서 자식컴포넌트의 스테이트를 사용할 수 있게 합니당.
a
혹시 자식 컴포넌트에 주입시킬때 어떻게 전달하시나요??
u
음... 제가 질문을 좀 잘못이해한 것 같아용. 궁금한게 있는데 예시만 보면 props 위쪽의 4개 데이터 때문이 아니고 props때문에 컴포넌트를 리턴하는 인라인 함수가 만들어진 거 아닌가용??
a
네네 죄송해요 저도 이걸 어떻게 질문해야 좋을지 좀 난감해서 억지로 분리를 하면 아래처럼 되는데용(selectedStartDate... 외 3개 데이터는 원래 부모로 부터 와야하는데 그냥 구색맞춰서 예시로 넣은겁니다!)
그럼 이게 결국 제가 사용하는 라이브러리의 prop으로 들어가게 됩니다 말씀하신 props는 저 라이브러리에서 콜백형태로 제공되는 값들이에요!
아무래도 샌드박스로 재현을 해서 올리는게 나았겠네요 ㅜ.ㅜ 혼란을 드려 죄송합니다
u
꼭 ConfirmPreStock을 가지고있는 컴포넌트에서 selectedStartDate 등의 state와 이벤트핸들러를 가지고 있어야한다면, Toolbar가 넘겨주는 props를 args로 받아서 args와 selectedStartDate등을 MTableToolbarFilter에 주입해서 리턴하는 함수를 useCallback으로 감싸면 매 렌더링마다 새로 렌더링되는 일은 막을 수 있을 것 같아용.
물런 저도 뇌내 망상이라 ㅎㅎ...
a
저도 처음에 메모이제이션을 해볼까 했는데 결국 디펜던시가 변경되면 함수가 새로 실행되는 건 같아서 unmount되고 새로운 컴포넌트가 생기더군요 ㅜ.ㅜ
u
아아... 리렌더링이 아닌 언마운트/마운트가 되는군용....
누군가 나타나셔서 해결해주시면 좋겠네요... 저도 궁금해서...
a
넴 퇴근후에 샘플코드를 한번 짜보겠습니다..!
h
컴포넌트를 넘기지마시고 render prop 으로 넘기세요
아니면 차라리 element 를 넘기시는게 낫습니다
a
일단 재현은 이렇게 해봤는데요 https://codesandbox.io/s/vibrant-carson-7q2sl?file=/src/App.js
혜성님 말씀대로 한번 시도해볼게요
음.. 일단 SomeComponent.js 부분의 인터페이스가 라이브러리쪽 코드 부분에 해당해서 저기를 바꿀 순 없는 상태인데 어떻게 엘리먼트나 렌더 프롭으로 넘겨야할지 모르겠네용,,
h
어떤 라이브러리가 component 를 prop으로 받나요
알려주세요 피하게 ㅋㅋㅋ
이건 뭐 SomeComponent 를 memo 하는거 말고는 방법이 없는데여
애초에 추상화가 상당히 잘못된거같아요. 컴포넌트를 믹스인 해서 새 컴포넌트를 만든다고 하더라도 모듈 스코프에서 해야지 렌더 스코프에서는 정적이여야해요. 이거의 예외가 as props 라는 패턴인데 이거 썩 좋지 않습니다
메모는 React.memo 쓰시면 되고, 두번째 인자로 comparator 넘길 수 있습니다. 그걸로 componentProp 변경은 무시하게 하시면 됩니다. 물론 이러면 동적으로 컴포넌트를 변경하실 수 없고요
a
https://github.com/mbrn/material-table MUI 에서 complementary project 로 추천해서 도입했었던 lib인데 쓸수록 한계에 부딪히네요 그래서 새로 추가하는 코드는 react-table 로 하고 있긴한데 이미 많은 부분을 차지하고 있는,,
네네 흐 그러면 저같은 경우는 prop에 따라서 컴포넌트 변경이 되어야 하는 케이스(sandbox 에서의 input 부분)이니 메모는 사용을 못하겠고.. react-table 을 사용하거나 다른 방법으로 억지스럽게 데이터를 넘기는 수밖에 없겠군요 ㅜ
h
아 material-table 이군요
컴포넌트는 모듈스코프에서 정의하시고요
"prop 에 따라서 컴포넌트 변경" 이 부분을 제거해보세요
일반적으로는 제거할 수 있습니다
정 안되면 컨텍스트를 하나 만드시고요
근데 step in 때문에 Material table 필터를 저렇게 커스터마이징 하는것도 꽤 불편할 일인 것 같네요 일반적인 테이블 컴포넌트 주변 역할을 한참 벗어나는거같은데요
필터 컴포넌트가 table 의 child가 아니라 sibling 이라고 생각하는게 더 적합할 것 같습니다. 부모는 상태컨테이너일테고 table은 representation에 충실하게 만드셔야 할듯
"필터 컴포넌트만" 바꾸고 싶으시다면 기능을 Material Table에서 독립하시고
그게 아니라면 필터 컴포넌트 자체가 더 stateful 해져야 하는 케이스 같습니다.
pre...confirm 페이즈에만 filter 컴포넌트를 attach 한다 X -> filter 컴포넌트가 pre...confirm 페이즈에 반응한다 O
a
네 라이브러리 자체가 기능을 우겨넣다보니 bloated 된 느낌이 없잖아 있어요
맞아요 아예 필터를 떼놓고 구현하는 옵션도 있었는데 잊고 있었네요
근데 누군가 reactiflux 에 신기한 답변을 달아놔서 구경중입니다;; https://codesandbox.io/s/elated-archimedes-bg6e5?file=/src/App.js
h
rest props 포워딩 해줘야 넘어가지 않나요
올려주신건 SomeComponent 가 prop 을 포워딩을 안하고 있고요
a
음 그러게요,, 저도 타이핑해보고 어 되네 해서 봤는데 inputValue가 계속 undefined
h
Copy code
export default ({ componentProp, ...props }) => {

  return (
    <div>
      <Component data={data} {...props} />
    </div>
  );
};
이런식으로 하면 넘어가겠죠
다만 이건 Material Table 이 이렇게 해줘야한다는 소리라 옵션은 아니고요
a
네네 잠깐 설렜네요 흑
h
근데 필터만 그런거면
그냥 options.filtering 만 토글해줘도 되는거 아닌가욤
a
아?? 잘 이해를 못했어요 material-table option에 filtering 말씀이신가요?
h
네
그냥 피쳐 자체를 관리하는걸로 기억하는데
제가 쓸때는 컴포넌트 오버라이딩 관련해서 사용할 때 큰 문제 없었거든요
a
요기 말씀이시죠
아 근데 그러고보니...제가 저 기능을 지금 왜 필터에 넣고있었는지 모르겠네요 ?!
h
네 저거 아니면 다른 options 에서 제공하는 플래그들이요
네네.. .ㅋㅋㅋ
a
필터랑 상관없이 쿼리할때 필요한 것들이었는데
h
제가 쓰던 기억엔 저런 코드가 나올일이 없었기에...
👍 1
a
이런이런
이거 한번 다시 제대로 생각을 해보고 돌아오겠습니다 ;; 감사합니다!!
👍 1
Open in Slack
PreviousNext
Powered by