Front-End/React9 React Hook - useCallback useCallback => 컴포넌트 최적화 기능 (useMemo와 기능적으로 같다) useCallback 설명useCallback(()=>{},[]) useCallback은 첫 번째 인자로 받은 콜백 함수 객체를 메모리에 저장(Memoization)한다. 그렇기 때문에 컴포넌트가 렌더링될 때마다 새로운 함수 객체를 매번 생성하지 않고, 의존성 배열이 변하지 않는 한 이전에 생성된 함수 객체의 참조를 그대로 재사용한다. 예시)function Example(){ const confirmName = (name) => { return "confirm complete" } return {value} } Example 은 함수형 컴포넌트이므로 렌더링될때 Example 함수를 .. 2025. 9. 16. React Hook - useMemo React 모든 관련 강의들은 별코딩님을 강의를 보고 공부하고 있는데 강의가 정말정말 좋은것같다.. useMemo 기능 useMemo 기능설명 : 컴포넌트 성능을 최적화 해주는 hookMemoization : 동일한 값을 리턴하는 함수를 반복적으로 호출할때 필요할때마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 기법이다.=> 자주 필요한 값을 맨 처음 계산할때 캐싱을 해두고 그 값이 필요할때마다 캐시에서 꺼내서 사용한다는 것. 함수형 컴포넌트 => 어쨋든 함수, 함수형 컴포넌트가 렌더링 된다 => 호출된다=> 함수는 호출될때마다 함수안에 정의되어있는 모든 변수들이 초기화된다. const value = useMemo( callback , array )첫번째 인자에는 콜백함수를 받는다 => Me.. 2025. 9. 15. React Hook - useContext , Context API useContext를 배우기전에 React에서 데이터가 전달되는 방식이 어떤지 이해해야한다.. React 데이터 전달 방식 Reac에서 데이터는 항상 부모에서 자식으로 단방향으로 흐른다. 예를 들어, 고조할아버지 → 증조할아버지 → 할아버지 → 아버지 → 손자 이런 관계가 있다고 가정해봅시다. 만약 손자 컴포넌트가 필요한 데이터를 고조할아버지 컴포넌트가 가지고 있다면, 중간에 있는 증조할아버지, 할아버지, 아버지는 실제로 데이터를 쓰지 않더라도 무조건 props를 통해 전달해야 합니다. 이처럼 React의 단방향 구조 때문에 필요한 데이터는 직접 전달받는 방식밖에 없습니다. 문제는 전달해야 하는 데이터가 바뀔 경우, 다시 최상위인 고조할아버지 부터 수정해야 하므로 관리가 번거롭다는 점입니다.=> 이러한.. 2025. 9. 11. React Hook - useRef 기본 코드const ref = useRef(value); 이때 ref의 current 값은 value 가 된다. 그리고 ref 객체는 수정이 가능하기 때문에 언제든 다른 value 로 바꿔줄 수 있다.component의 mount 때 시되며, unmount 되기 전까지 값을 그대로 유지가 가능함. useRef의 기능 1. 저장 공간 기능State의 값이 변화하게 되면 컴포넌트가 리런더링이 되고 그때문에 내부변수들이 컴포넌트 마운트때의 값으로 초기화된다. 하지만useRef 를 사용하게 되면 변수값을 따로 지정해놔도 값이 변한다 해도 리렌더링이 되지 않고 내부 변수들의 값을 그대로 유지할 수 있게된다. 그리고 State로 인해 컴포넌트가 재생성 되더라고 useRef의 값은 변하지않고 유지된다. 2. DOM .. 2025. 9. 9. 이전 1 2 3 다음