sliver__

useCallback hook의 형태는 다음과 같다.useCallback(함수, []) useEffect와 비슷하게 생겼다. useCallback은 함수 객체가 컴포넌트 리 랜더링시 재 생성되는걸 막아준다. 즉 메모리에 해당 함수 객체를 저장하고 리 랜더링시 메모리에 저장된 함수를 사용한다.  의존성 배열은 useEffect와 마찬가지로 추가된 변수가 변경되면 useCallback 함수를 다시 실행한다. useCallback은 useEffect의 의존성 배열에 함수를 추가한 경우, 무한 루프를 막기 위해 사용되는 것 같다.

useEffect는 실행할 함수와 의존성 배열 두 가지로 구성되어있다.useEffect(() => {함수}, [의존성 배열]); useEffect의 실행 시점은 컴포넌트가 수행된 이후에 "한 번" 실행된다. 그러나 의존성 배열에 변수 또는 함수를 지정하면 해당 변수 값이 변경될 때마다 또는 컴포넌트 리랜더링으로 인한 새로운 함수 객체가 생성될 때 마다 useEffect의 함수를 재 실행한다. 함수의 경우 특히 무한루프에 빠지지 않도록 조심해야 한다. 왜냐하면 의존성 배열에 함수를 넣는 경우 다른 컴포넌트에 의해 리 랜더링시 의존성 배열에 추가한 함수 객체도 새로 생성되기 때문이다.

🧠 React의 상태 관리를 Context + useReducer로 쉽게 해보자!React를 사용하다 보면, 컴포넌트 간 상태 공유가 필요해지는 순간이 찾아옵니다. 이럴 때 흔히 props drilling 문제가 발생하죠. 상태를 자식의 자식까지 계속 넘겨줘야 하니까요.그럴 때 사용할 수 있는 것이 바로 Context API입니다. 하지만 Context만으로 상태를 업데이트하려면 코드가 복잡하고 관리가 어려워지기도 해요. 이 문제를 해결하기 위해 useReducer를 함께 사용하면 아주 깔끔하게 해결할 수 있습니다.📌 Context API + useReducer 조합이란?Context API는 전역 상태를 만들고 앱 전체에 공유할 수 있게 해줍니다.useReducer는 복잡한 상태 업데이트를 swit..

Context API여러 컴포넌트 간 상태 공유를 위해 State를 끌어올리게 된다.그러면 가장 상단인 App 컴포넌트에 상태를 정의하게 되고, 정의한 상태를 props를 통해 사용하려는 컴포넌트까지 전달한다. 컴포넌트 관계가 복잡해지고 깊어지면 props를 사용하지도 않는데 넘겨줘야하는 상황이 발생한다. 이러한 상황을 prop drilling 이라고 한다. 컴포넌트에 계속 prop을 넘겨주기 때문이다. 이러한 상황을 해결하기 위해서 context 라는 개념을 사용한다. context는 컴포넌트 전체를 둘러싼 개념이라고 생각하면 된다.context에 상태를 정의하고 상태를 변경하기 위한 함수를 정의한다.그리고 해당 상태 변경이 필요한 컴포넌트만 접근하면 된다. 그러면 prop으로 상태 값이나 함수를 넘길..