가자가자~252 Bubbling과 Capturing Bubbling & Capturing Bubbling => start from child to parent Capturing => start from parent to child Bubbling과 Capturing은 순서가 정 반대인 동작이다. Bubbling은 이벤트가 발생했을때 자신이 속한 parent, 그리고 그 위의 모든 parent까지 이벤트가 발생한다. 여기에 애국가가 있다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 parent id를 가진 div태그와 child id를 가진 div태그로 애국가가 감싸져있다. 이를 클릭하였을때 console.log()를 찍어내게 해보자 const parent = document.getElementById('.. 2023. 8. 25. useCallback useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React Hook이다. const cachedFn = useCallback(fn, dependencies) Parameters fn : The function value that you want to cache. On next renders, React will give you the same function again if the dependencies have not changed since the last render. dependencies : The list of all reactive values referenced inside of the fn code. Reactive values include props, sta.. 2023. 8. 8. Hooks 출처 - https://react.dev/reference/react Hooks Hooks를 사용하여 컴포넌트에서 다양한 리액트의 기능을 사용할 수 있다. Hooks는 독립된 재사용 가능한 함수형 자바스크립트 기능이다. State Hooks State hooks는 유저가 입력한 정보처럼 기억된 컴포넌트이다. useState와 useReducer가 있다. Context Hooks Context를 사용하면 component가 props를 사용하지 않고 멀리 떨어진 부모로부터 정보를 받을 수 있습니다. 예를 들어, 앱의 최상위 컴포넌트가 깊이에 관계없이 현재 UI 테마를 아래의 모든 구성 요소에 전달할 수 있습니다. Ref Hooks Refs는 컴포넌트가 렌더링에 사용되지 않는 정보들을 보관한다. state와.. 2023. 8. 8. React 리액트는 컴포넌트 기반의 유저인터페이스를 만드는 프론트엔드를 위한 무료오픈소스 자바스크립이다. Next.JS 처럼 싱글페이지, 모바일, 등을 개발하는데 사용할 수 있다. 리액트는 유저인터페이스와 DOM에 컴포넌트를 렌더링하는것에 초점이 맞추어져 있으며, 종종 라이브러리 및 기타 클라이언트에 의존한다. 리액트는 상태가 바뀌었을때, 그 상태에 따라 DOM을 업데이트 할 규칙을 정하는것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다. Virtual DOM을 사용하여 빌드하고, 실제 보여지는 DOM과 차이가 있는 곳을 감지하여 실제 DOM에 patch 시켜준다. 출처 - https://react.dev/reference/react 2023. 8. 8. 이전 1 2 3 4 ··· 63 다음