개발 학습/프론트엔드14 잘 사용하지 않은 React use Hook - 3 1. useImperativeHandleuseImperativeHandle은 함수 컴포넌트에서 생성된 ref 객체의 인스턴스를 조작하고 사용자 정의 메서드를 노출할 때 사용하는 Hook입니다. 이 Hook은 주로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접적으로 조작해야 할 때 사용됩니다.import React, { useRef, useImperativeHandle, forwardRef } from 'react';// 자식 컴포넌트const ChildComponent = forwardRef((props, ref) => { const internalRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { internalRef... 2024. 8. 22. 개발간에 썼던 React use Hook - 2 1. useContext컴포넌트 트리 전체에 데이터를 공유할 수 있도록 해주는 기능으로 Redux를 대체할 수 있습니다. 단계1. createContext를 사용해 초기상태값을 넣어 새로운 컨텍스트 객체를 생성2. ContextProvider 컴포넌트를 사용하여 하위 컴포넌트들 에게 context값 업데이트하고 전달3. useContext를 사용하여 context값을 불러옴 💥 useContext 주의점컴포넌트 구조와 의존성 관리: useContext를 사용하여 컴포넌트에서 Context를 가져올 때, 컴포넌트의 구조와 의존성을 고려해야 합니다. Context를 너무 많이 사용하면 컴포넌트 간의 의존성이 복잡해질 수 있습니다. 필요한 경우에만 useContext를 사용하여 컴포넌트 간의 의존성을 최소화.. 2024. 8. 22. 개발간에 썼던 React use Hook - 1 1. useCallback부모컴포넌트에서 자식컴포넌트로 onClick 함수를 전달해주는 상황일 때 2가지 상황에 대해 생각해보자const Root = () =>{ return ( console.log('click !')}> console.log('click !')}> console.log('click !')}> )}const Number = ({onClick}) =>{ return( 버튼 ) 해당코드는 Number 컴포넌트로 onClick 함수를 직접 생성해서 전달해주기 때문에 렌더링이 발생할 때 마다 새로 함수다 생성된다. const Root = () =>{ const onClick = () =>{ console.log('clic.. 2024. 8. 22. React 상태관리 제대로 해보기 (useState ↔ Redux) Hook - useState 우선 useState로 최상위 컴포넌트에서 장바구니에 담은 아이템들을 관리하고 있으며 장바구니에서 담긴 아이템은 삭제하거나 수량을 변경하면 최상위 컴포넌트에 있는 장바구니 상태인 cartItems가 변경되며 상품리스트에 있는 새 아이템들을 장바구니에 담으면 기존 장바구니에 있는 itemId가 존재하는, 담겨있던 상품이라면 갯수만 추가해주고 담겨 있지 않던 상품이라면 아이템을 새롭게 추가하게 된다. 최상위 컴포넌트 App function App() { const [items, setItems] = useState(initialState.items); //판매중인 itemList const [cartItems, setCartItems] = useState(initialState... 2022. 4. 19. Node.js에서 Puppeteer로 동적웹 크롤링하기 문제점 클레이튼 스코프 웹에서 내 계정을 검색하고 나온 결과에서 KIP17 Balanace 같은 버튼을 누른뒤 바뀌는 HTML 소스를 크롤링 하고 싶었다. 하지만 이는 내가 해당하는 버튼을 누른뒤에 HTML이 동적으로 바뀌게 되고 우리가 자주쓰는 Axios나 Cheerio, Postman은 정적인 웹의 소스만 가져올 수 있어 원하는 것을 크롤링 할 수 없었다. 이렇게 body나 원하는 html소스를 얻을 수 없어 크롤링을 할 수가 없으므로 우선 동적으로 내가 눌러서 접근한 버튼에서까지 보이는 전체 html소스를 받아 올 수 있어야 했다. 해결 서버단에서 puppeteer를 사용했다. 이상하게 클라이언트 단에서 npm하여 import하면 오류가 계속났다. Cannot read properties of un.. 2022. 2. 8. S2: Redux Index.js의 Action 함수 Reducer.js dispatch useSelector 2021. 10. 18. 이전 1 2 3 다음
