useControlled vs props 전달 시 어떤 이점이 있는지 잘 모르겠습니다. [react, next, javascript, typescript, 프론트엔드, frontend]

Question

참고한 코드/** useControlled.ts */ /** * 프로퍼티(valueProp)가 전달되면 해당 프로퍼티 값을 사용하고, * 그렇지 않으면 useState로 내부의 상태를 사용하는 훅 */ interface IUseControlledArgs { valueProp?: T; defaultValue?: T; } type IUseControlledReturn = [T, React.Dispatch>]; function useControlled(args: IUseControlledArgs = {}): IUseControlledReturn { const { valueProp, defaultValue } = args; const { current: isControlled } = useRef(valueProp !== undefined); const [state, setState] = useState(defaultValue); const value = isControlled ? valueProp : state; const setValue: React.Dispatch> = useCallback(newState => { !isControlled && setState(newState); }, []); return [value, setValue]; }위 글을 보고 있습니다.useControlled를 사용했을 때와, 그냥 props로 전달하면서 컴포넌트를 조작했을 때대체 뭐가 낫길래 useControlled 를 사용하는 것인지 잘 이해가 가질 않습니다.조언 부탁드립니다.출처 : https://fe-developers.kakaoent.com/2022/221110-ioc-pattern/#%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8C%A8%ED%84%B4controlled-props-pattern

스르르 · Answer

제 생각에는 그냥 props만 전달하는 식으로 짜도 됩니다. 이 컴포넌트가 controlled 상태만 지원하는 것으로 충분하다면 그렇게 짜는거죠. 근데 이 컴포넌트가 controlled일수도 있고 uncontrolled일 수도 있다면, 내부적으로 결국 분기처리를 해야하는데 그걸 react답게 처리하는 방식이 저 코드인 것 같습니다.

useControlled vs props 전달 시 어떤 이점이 있는지 잘 모르겠습니다. [react, next, javascript, typescript, 프론트엔드, frontend]

1개의 답변

기술 목록