본문 바로가기

전체 글

 (76)
[React] useContext 훅 이해하기 컨텍스트란?  컨텍스트를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.리액트 컴포넌트의 데이터는 위에서 아래로(즉, 부모로부터 자식에게) props를 통해 전달하지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다.  context를 이용 시 트리 단계마다 명시적으로 props를 념겨주지 않아도 많은 컴포넌트가 값을 공유할 수 있으며 createContext와 useContext 훅으로 이뤄진다.  컨텍스트 기능을 사용하는 리액트와 리액트 네이티브 코드는 항상 이름에 'Provider'가 있는 컴포넌트와 'use컨텍스트_이름()' 형태의 커스텀 훅을 사용한다.    컨텍스트 기능을 구현한 react-..
[React] useRef와 useImperativeHandle 훅 이해하기 ref 속성이란? 모든 리액트 컴포넌트는 reference의 앞 3글자를 따 ref 속성을 제공한다.  ref 속성은 초기에는 null 값 이였다가 마운트 되는 시점에 물리DOM객체의 값으로 변경된다.  즉 ref는 물리 DOM 객체의 참조이다.  HTML 요소는 자바스크립트에선 DOM 타입 객체이며 , 같은 요소는 HTMLElement 상속타입인 HTMLDivElement, HTMLButtonElement 타입 객체이다.  HTMLElement 타입은 click(), blur(), focus() 메서드를 제공하며 리액트 요소가 물리 DOM 상태일때만 호출할 수 있다.   ref 속성값은 물리 DOM 상태일 때의 값으로 ref로 얻은 값(DOM 객체)을 사용해 click()과 같은 이벤트를 호출할 수 ..

티스토리툴바