React hooks

React의 State함수형 컴포넌트의 useStateReact의 useState 동작 원리데이터 변경이 있는 웹 페이지를 만드는 경우페이지에 있는 데이터 부분이 변경 되었을 때 마다 DOM에 접근하여 수정 → 데이터가 변경 된 만큼 사용자가 보는 화면도 변경되어야

컴포넌트의 LifeCycle (함수형 컴포넌트)useEffectReact에서 컴포넌트의 LifeCycle은 크게 3가지로 구분Mount - 브라우저에서 컴포넌트가 처음 렌더링 될 때 실행update - 브라우저에서 컴포넌트가 재 렌더링 될 때 실행Unmount - 컴포

useRefuseRef 사용 목적useRef를 이용한 저장 공간 생성useRef를 이용한 DOM 요소 접근useRef returns a mutable ref object whose .current property is initialized to the passed ar

컴포넌트 렌더링 최적화useCallbackuseMemoReact.memo무분별한 컴포넌트의 렌더링을 방지하며 필요한 경우에만 컴포넌트가 렌더링될 수 있도록 하는 것리액트는 함수형 프로그래밍을 기반으로 한 자바스크립트 라이브러리그렇기 때문에 jsx 문법을 통해 컴포넌트를

React.memoReact.memo 예제리액트에서 제공하는 HOC(higher order component)자식 컴포넌트의 불필요한 렌더링을 최적화시키기 위해 사용어떤 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환해주는 함수React.memo는 일반 자식 컴포넌트를

useContextuseContext 예제context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyC