React_Hooks

useState훅은 컴포넌트에 state변수를 추가할 수 있게 해주는 React훅이다.initialState = state에 담기는 초기값이다.state = 첫 번째 렌더링시 initialState가 담기는 부분이다.setState = state를 다른 값으로 업데이트

useEffect훅은 컴포넌트를 외부 시스템과 동기화 할 수 있는 React훅이다.어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라질 때)처럼(즉, 렌더링 될 때마다) 특정 작업을 처리하는 실행 시키고 싶을 때 사

렌더링에 영향을 안받는 독립적인 데이터를 저장할때 쓰인다.또 useRef를 사용해 생성된 ref 객체를 JSX 내의 특정 DOM 요소에 ref 속성으로 할당함으로써, 해당 DOM 요소에 직접적으로 접근할 수 있게 된다. 이는 포커스 설정, 직접적인 DOM 조작 등의 작

useContext훅은 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 훅이다. prop-drilling없이 여러 컴포넌트에 걸쳐 데이터를 쉽게 전달하고 접근할 수 있다.위 예제에서 App컴포넌트는 MyContext.Provider를 사용하여 Child컴포넌트

개요 useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. (캐시(Cache) : 용량이 작고 빠른 메모리로, 주 기억 장치에 매법 접근하는 것을 피하고자 최근에 사용된 정보를 저장하는 임시 장소) calculateValue : memoi

useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React훅이다.fn : 함수 자체를 memoization해준다. 함수가 필요할 때마다 메모리에서 가져와서 사용한다.dependencies : 의존성 배열. 배열 안의 값이 변경되면 렌더링 된다

개요 reducer : state를 업데이트 하는 역할 dispatch : state 업데이트를 위한 요구 action : 요구의 내용

memo란 React에서 제공해주는 HOC(고차 컴포넌트)이다.memo를 사용하면 컴포넌트에 prop check를 통하여 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다.memorize로 인해 메모리를 추가적으로 사용되기 때문에 자주 사용하면 메모리 양이 소

개요 필요한 기능을 만들어 훅으로 활용할 수 있다. 주로 여러 컴포넌트에 사용되거나 반복되는 코드들을 하나로 만들어 사용한다. 활용예제_useInput 위 예제는 useInput이라는 커스텀 훅을 만들어 다른 컴포넌트에서 활용하는 예제이다. 확인을 누를 때 마다

개요 useId는 각 컴포넌트마다 고유한 Id를 만들 때 사용하는 훅이다. 아무런 인자도 전달 받지 않는다. 활용예제 위 예제는 useId의 사용법과 포커싱을 관련 확인하기 위한 예제이다. MyInput.js 에서 useId는 각 label과 input에 각 캄