Front-end

[React] React Hooks - useMemo, useCallback, useRef

1. useMemo 의존성 변수가 변하지 않은 경우 기존의 값을 그대로 반환함으로서 렌더링 속도를 빠르게 할 수 있는 hook. useMemo함수는 렌더링이 진행되는 과정에서 실행되기 때문에 유의해서 사용해야한다. 예를 들어 서버에서 데이터를 받아오거나 DOM 객체에 접근해야하는 경우는 useEffect를 사용해야 한다. 의존성 배열을 넣지 않을 경우 렌더링 때마다 항상 실행된다. 혹은 의존성 배열을 빈 배열로 남겨둔 경우 useEffect와 같이 마운트 시에만 호출된다. const memoizedValue = useMemo( () => { return updatedValue(deps1,deps2); },[deps1, deps2] ); 2. useCallback useMemo와 달리 값이 아닌 함수를 반..

CRA에서 craco이용해 @components 절대경로 설정

오랜만에 react로 개발하면서 tsconfig에서 절대경로를 설정을 하는데 안되서 알아보니 cra로 세팅한 경우에는 craco 사용해서 또다른 설정을 해줘야한다. 검색을 조금 해보니 react 버전 18에서는 잘 안된다고 하던데 아래 참고 블로그 따라서 해보니 정상적으로 설정됐다. 며칠동안 설정이 안되서 끙끙 앓았는데 깔끔하게 해결-! Error [Craco-Alias Error] Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com. 위와 같은 에러 발생 시 tsconfig.paths.json파일 마지막 항목에 ","를 붙엿는지 확인해보자. 지우고 실행하면 해결! json이기 때문에..

[CSS] custom checkbox 만들기

checkbox를 css로 커스텀하기는 너무나 어렵다. 인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다. All /*CSS*/ .all { position: absolute; opacity: 0; } .all:checked ~ .option > .checkmark { border-width: 1px; background-color: red; } .all:checked ~ .option > .checkmark:after { display: block; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid red; border-radius: 5px; margin-right: ..

[React] React Hooks - useState, useEffect

Hooks는 혼란을 야기했던 Class없이 React의 기능을 사용할 수 있게 해준다. Hooks는 함수 컴포넌트에서 React state와 생명주기(lifecycle features)을 연동할 수 있게 해주는 함수들을 말한다. React Hooks는 다음과 같은 사용 규칙이 있다. React 함수 컴포넌트 내에서 호출해야 한다. 컴포넌트 내 최상위에서 호출해야한다. 1. useState state값은 컴포넌트가 렌더링 돼도 유지되며, 컴포넌트가 렌더링될 때 한번만 생성된다. 아래 코드에서 0의 자리에는 초기값을 넣는다. function Sample() { // 선언 const [count, setCount] = useState(0); return( {count} setCount(count+1)}> ) ..