함수 추상화 연습하기 - 계산과 액션

🐾들어가며

원티드 프리온보딩 강의에서 추상화를 할 때 함수의 역할에 따라 추상화하여 분리하는 방법을 배웠습니다. 그래서 직접 쓴 코드에서 해당 내용을 토대로 적용을 해보려고 합니다.

✨본격적으로

✅함수 분리하기

기존 코드 입니다. 프로젝트에서 복잡한 로직을 사용하지 않아서 겨우 찾아냈습니다.

import React, { useRef, useEffect } from 'react'; import styled from 'styled-components';  const ResizingTextarea = ({ onChange, ...props }) => {   const textareaRef = useRef();    useEffect(() => {     handleResizeHeight();   }, [props.value]);       const handleResizeHeight = () => {     if (textareaRef.current) {       textareaRef.current.style.height = 'auto';       textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';     }   };    return <StyledTextarea ref={textareaRef} onChange={onChange} {...props} />;  };  export default ResizingTextarea; 

handleResizeHeight 함수의 역할은 계산이며, 외부의 상태에 의존하여 부수 효과를 이용하고 있습니다. 따라서 부수 효과를 줄이기 위해 textareaRef에 해당하는 곳을 파라미터로 선언하여 인자를 받으려고 합니다.

/** *@param ref textarea에 대한 참조 **/   const handleResizeHeight = (ref) => {     if (ref.current) {       ref.current.style.height = 'auto';       ref.current.style.height = ref.current.scrollHeight + 'px';     }   }; 

위와 같이 바꾸어 컴포넌트와 분리하여 사용할 수 있도록 합니다.기존에는 ResizingTextarea라는 고정된 스타일에만 resizing이 가능했다면 이제는 다른 스타일의 textarea에도 쉽게 적용이 가능합니다. 물론 커스텀 훅으로 빼도 좋겠지만, 같은 경로에 존재하는 것도 나쁘지 않고, 별도의 React 훅을 사용하면 컴포넌트 최상위에만 사용할 수 있는 제한 사항이 있기 때문에 함수로만 두었습니다.

또한 기존에는 textarea에 이벤트처럼 부여하여 handle이라는 컨벤션을 사용하였지만, ref를 넘겨주고, useEffect안에서 동작하기 때문에 handle을 제외한 resizeHeightForTextarea로 변경하는 것을 고려 중입니다.

✔️결론

추상화를 할 땐, 해당 함수의 목적, 함수의 역할에 대해 생각해보기로 했습니다. 역할이 섞여있고, 어쩔 수 없이 액션의 역할을 하는 함수 내에서 계산의 역할을 하는 함수를 최대한 분리하는 게 좋다고 합니다! 일부라도 재사용 할 수 있다면 말입니다.

✅피드백 추가

이 글은 옵시디언을 통해 발행하였습니다.