React (12) 썸네일형 리스트형 재사용 위한 인풋 컴포넌트 버튼 컴포넌트에 이어서 이번엔 인풋태그 관련 컴포넌트를 만들어 보았다 시작하기 앞서 https://kangcheon.tistory.com/91 리액트 버튼 컴포넌트 재사용 간단하게 공통으로 사용할 버튼 태그를 만들어 보았다 사실 이렇게 굳이 버튼 컴포넌트를 만든 이유는 재사용,유지보수성은 다 제쳐두고 내가 편하려고 만들었다. 개발 시작! 열심히 코드 짬 열 kangcheon.tistory.com 위 포스트에서 만든 두개 이상의 스타일 지정 위한 함수 divideStyleIdString 함수에 변경점이 생겼다 여러 컴포넌트에서 사용하기 위해 버튼 컴포넌트 안에 있던 이 함수를 util 폴더를 따로 만들어 이곳에 보관하였고 //src\utils\divideStyleIDString export default .. 재사용 위한 버튼 컴포넌트 간단하게 공통으로 사용할 버튼 태그를 만들어 보았다 사실 이렇게 굳이 버튼 컴포넌트를 만든 이유는 재사용,유지보수성은 다 제쳐두고 내가 편하려고 만들었다. 개발 시작! 열심히 코드 짬 열심히 코드 짜다보니 어느새 프로젝트 파일이 늘어나고 커짐 갑자기 피그마 디자인 수정!!! 버튼 스타일 수정할 일이 생김..ㅠ 뭐야 이 스타일을 사용하는 버튼이 너무 많고 어떤 css 파일에 들어가 있는지도 찾기 힘들어 개발자도구 켜서 파일 위치 찾고 같은 스타일을 사용하는 버튼태그 일일이 수정 이러한 이유때문에 공통 컴포넌트의 필요성을 깨닫고 버튼 컴포넌트를 만들게 되었다 글을 쓰다보니 깨달은 건데 위 이유가 재사용,유지보수성과 연관되어 있는 것 같다..ㅎ 생각해야 될 것들 - 각기 다른 스타일 지정 할 수 있어야함 - .. [React] useCallback 정의 인라인 콜백과 그것의 의존성 값의 배열을 전달하세요. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다. "React 공식문서" useCallback은 React에서 함수를 메모이제이션하는 훅으로,이 훅을 사용하면 렌더링 시에 함수를 다시 생성하지 않고 이전에 생성된 함수를 재사용할 수 있다 사용방법 const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],.. [React] useMemo 정의 “생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요. useMemo 는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 줍니다. "React 공식문서" useMemo는 리액트에서 성능 최적화를 위해 사용되는 훅 중 하나로, 계산 비용이 높은 연산 결과를 메모이제이션(기억)하여같은 연산을 반복해서 수행하지 않고 이전에 계산한 값을 재사용할수 있게 해준다 사용방법 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); useMemo는 useEffect와 마찬가지로 두 개의 인자를 받는다 첫번째 인자 : 메모이제이션하려는 함수, 이 .. 이전 1 2 다음
