[ React ] React Hooks - useRef useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current 프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current 처음에는 전달한 initialValue로 설정된다. 값을 변경할 수 있다. 하지만 state와 다르게 리렌더링을 유발하지않는다. ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u.. [ React ] React Hooks - useMemo / Memoization useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies); 예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl.. [ React ] 무한 렌더링 탈출기 문제프로젝트를 진행하면서 만났던 무한 렌더링 문제문제의 코드는 다음과 같다.export default function SideBar(){ const [isChat,setIsChat] = useState(true); return ( 채팅 내담자 정보 { isChat? : .. [ React ] React Hooks - useCallback useCallback Hook이란 ? useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로 함수의 재사용을 위한 Hook이다.리렌더링 간에 함수 정의를 캐싱해준다. 아래의 코드를 보면 첫번째 인자는 리렌더링 간에 캐싱할 함수 정의이고 두번째 인자는 반응형 값들이 들어간다.여기서 반응형 값이 변경(의존성이 변경)되었을 때만 다시 메모제이션된 버전이 변경된다.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],); 또 다른 예시로 이 코드의 경우 x,y값이 바뀌지않는 경우기존 함수를 계속 반환하고 다음 렌더링 때 기존 함수를 다시 사용한다.만약 이어지는 렌더링에서 의존성을 비교했을 때 전과 달라지면 이.. [ react ] js파일에서 element height, width 변경하기 오늘 마주한 문제는 이미지 크기만큼 크기를 가져와 평점과 더 보기 버튼을 담은 element 크기에 똑같이 설정하는 것이었다. ( 오직 평점과 더보기 버튼을 포스터 hover시 포스터 가운데에 두기 위함... ) vanilla js에서만 살다가 react를 사용하니 css도 맘대로 할 수가 없었는데... js에선 element.clientWidth나 element.offsetWidth로 쉽게 가져와 style을 변경할 수 있었는데 여기선 useRef를 사용해야한다. useRef를 통해서 img의 현재 높이와 넓이를 가져오고 그걸 setHeight, setWidth함수를 통해 heigth, width 변수에 집어넣으며 movie-hidden이라는 클래스를 가지는 div의 style에 이 변숫값으로 높이와.. 이전 1 다음
