👨💻 Dev/React4 [React] useCallback으로 useEffect 심화 활용 ✔ 들어가며 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 훅이다. 리액트의 useCallback를 useEffect와 함께 사용하여 여러방면으로 효율적인 코드를 구성할 수 있는 방법을 배워서 포스팅으로 정리해본다. useCallback은 useEffect와 생긴 것은 똑같지만, 역할은 조금 다르다. ✔ 예제로 보는 useEffect 심화 활용 const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); 첫 번째 인자로 콜백함수를 넣어주고 호출해주고 있고, 두 번째로 의존성 배열을 넣어주고 있다. a나 b가 바뀌었을 때만 useCallback의 콜백 함수를 새로 생성하고, 그렇지 않을 경.. 2022. 12. 15. [React] useEffect hook 쉽게 알아보기 ✔ 들어가며 useEffect, 직역하면 효과를 이용한다. 그럼 무슨 효과냐면? state 바뀌면서 생기는 "side effect", 부가적인 효과들을 useEffect 훅 안에서 수행할 수 있게 해준다. (Side effect: component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과) ✔ 예제로 알아보는 useEffect 💡 exam count가 업데이트될 때 document.title에 count를 업데이트해줘! 하는 코드다. import React, { usestate, useEffect } from "react"; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.titl.. 2022. 12. 15. [React] key가 필요한 이유와 주의할 점 들어가며 React에서 map으로 컴포넌트를 반복 렌더 할 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있는데, 여기서 key는 무엇이며 왜 필요한지에 대해 알아본다. " Warning: Each child in a list should have a unique "key" prop " 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. 💡 exam Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duk.. 2022. 12. 10. [React] State 살펴보기 state와 필요한 이유 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요하다. 이를 위해 필요한 것이 state다 state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체라고 할 수 있다 const, let 등으로 선언한 변수와 다르게 state는 값이 변하면 관련 있는 컴포넌트들이 re-rendering 되어 화면이 바뀐다 useState() import React, { useState } from "react"; // Hook const [state, setState] = useState(); // [값, 값을 변경할 때 쓰는 함수] 일반적으로 리액트에서는 '유동적인 데이터'는 변수에 담아서 사용하지 않고, useState라는 리액트 Hook함수를 사용하여 stat.. 2022. 12. 4. 이전 1 다음
