javascript/react (19) 썸네일형 리스트형 [React] useImperativeHandle을 타입스크립트와 사용하는 방법 useImperativeHandle을 이용하면 하위 컴포넌트의 변수나 함수를 상위 컴포넌트에 공개하여 사용할 수 있다. 이게 단순한 자바스크립트 기반으로 코드를 작성하는 경우에는 별로 어렵지 않은데, 타입스크립트 기반으로 작성하기 시작하면 꽤 까다롭다고 느끼게 된다. 인터넷에 검색해도 영어 문서밖에 안나와서 이번 기회로 사용법을 정리하고자 한다. 다음 문서를 참조했다. declare type with React.useImperativeHandle() function App(){ const cntEl:any = React.useRef(null); // I don't know what type should be here. React.useEffect(()=>{ if(cntEl.current){ cuntEl... [React] forwardRef & useImperativeHandle useRef는 실제 DOM 상의 엘리먼트를 참조하고, 이들을 직접 제어하기 위한 hook이다. 이때 해당 hook은 기본적으로 리액트에서 제공하는, html의 각 태그에 대응되는 기본 JSX에 대해 작동한다. 여기서 고민이 있다. 기본 제공되는 JSX는 ref로 접근할 수 있는데, 그렇다면 우리가 만드는 컴포넌트는 어떻게 ref로 접근할 수 있을까? 위의 질문을 다시 한번 조정해보자. 커스텀 컴포넌트를 ref로 접근한다는 의미가 무엇일까? 예를 들어 input JSX을 내부적으로 가지고 있는 Input 커스텀 컴포넌트을 ref로 접근하고 싶다는 것은 Input 커스텀 컴포넌트 내부의 input JSX에 접근하고 싶다는 의미로 받아들여질 수 있다. 이 경우 커스텀 컴포넌트는 일종의 래퍼이고, 실제로 접근하.. [React] useContext Hook & createContext React 내의 대부분의 상태 관리는 useState, useEffect, useRef 정도의 hook으로 처리 가능하다. 그러나 개발중인 서비스의 규모가 커지면 커질수록 데이터의 이동이 많아짐에 따라 Callback이나 Argument의 형태로 컴포넌트 사이의 데이터를 주고 받는 방식은 한계에 봉착한다. 위 그림은 리액트 컴포넌트간의 데이터 전송 방식을 나타낸 것이다. 녹색 화살표는 실인자로 데이터를 넘기는 방식을 나타내고, 주황색은 콜백을 이용하여 하위 컴포넌트의 데이터를 상위 컴포넌트로 전송하는 방식을 의미한다. 유저가 특정 컴포넌트에서 로그인하고, 해당 정보를 프로젝트 전반에 걸쳐 사용하는 경우를 생각해보자. 만약 유저의 정보를 유지하는 컴포넌트가 Component 4이고, 해당 정보를 이용하는 .. [React] create-react-app이 작동하지 않을 때 : We no longer support global installation of Create React App / You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 다음 명령을 이용하여 리액트 프로젝트를 만들려고 했으나, 실패했다. npx create-react-app login-app --template typescript 위 코드는 npx의 create-react-app을 이용하여 타입스크립트에 대응하는 리액트 프로젝트를 만들겠다는 명령이다. 분명 어제까지만 해도 해당 명령이 잘 동작했으나, 이상하게도 오늘은 동작하지 않는다. 해당 명령을 입력했을 때 나타나는 설명 창이다. 최신 버전이 5.0.0인데, 4.0.3을 사용하고 있거나, create-react-app이 전역적으로 설치되어 있어 실행되지 않는 모양이다. 후자에 대해 내가 찾아본 방법은 다음과 같다. npm에 전역적으로 설치된 create-react-app을 제거한다. npm의 캐시를 제거한다. crea.. [React] useReducer Hook https://ko.reactjs.org/docs/hooks-reference.html#usereducer useReducer hook은 useState와 같이 상태를 관리하기 위해 사용될 수 있는 hook이다. useState에 비해 다양한 값을 동시에 처리하거나, 다양한 action을 정의해 둘 수 있다는 장점이 존재한다. useReducer 의 사용은 다음과 같은 상황에서 고려할 수 있다. 연관성이 높은 변수들을 함께 처리하고 싶은 경우 특정 state가 자신의 이전 값 기반이 아니라, 별개의 다른 state들의 값 기반으로 업데이트 되는 경우 업데이트 하는데 있어서 다양한 로직이 존재하는 경우 해당 hook은 다음과 같은 방식으로 사용할 수 있다. const [state, dispatch] = u.. [React] useEffect Hook 특정 프로그램을 만드는 경우를 생각해보자. 리액트에 의해 관리되는 State을 이용하여 표현할 수 있는 부분도 존재하지만, 특정 데이터를 가져오거나 동작을 구독 방식으로 ( 특정 이벤트에 반응하여 작업 수행 ) 구현하는 경우 등의 업무는 State 관리만으로는 처리가 불가능하거나 매우 어렵다. 이렇듯 리액트는 컴포넌트의 렌더링과 관계없는 영역인 Side Effect 까지 State로 관리할 수는 없는데, 이런 부분을 관리하기 위해서 등장한 hook이 useEffect이다. useState은 set~ 함수를 이용하여 State을 변화시키고, 화면의 re-rendering 을 야기한다. 비슷하게 useEffect는 State의 변화에 따라 특정 함수의 실행을 야기한다. 이때, 해당 함수는 다음과 같은 구조를.. [React] useRef Hook 리액트는 기본적으로 리액트 내부에서 관리하는 virtual DOM을 갱신하고, 갱신된 내용을 웹사이트, 앱 등 다양한 실제 DOM에 대응시키는 방식으로 동작한다. 그러나, 특정 상황에서는 실제 DOM에 접근하고 싶을 수 있다. 리액트에서는 실제 웹 환경에 존재하는 엘리먼트에 대해 직접적으로 접근할 수 있도록 useRef hook을 제공한다. const ref = useRef(); // ref의 선언 ... return (); // ref와 실제 input 엘리먼트를 ref를 통해 연결 사용법은 극히 간단하다. useRef 을 이용하여 ref 객체를 선언 위에서 생성된 ref 객체를 연결하기를 원하는 태그의 ref 프로퍼티로 전달 위와 같은 방법을 통해 생성된 객체는 실제 DOM 상의 엘리먼트를 가리키게 .. [React] Portal 리액트는 기본적으로 하나의 html 파일만 사용한다. 이때 특별한 조작을 하지 않는다면, 우리가 선언한 모든 컴포넌트들은 id = 'root' 인 실제 DOM상에 존재하는 노드의 자식이 된다. 그런데 경우에 따라 하나의 노드 아래에서 모든 것을 조작하는 대신, 여러개의 노드에서 컴포넌트들을 별개로 작동하도록 만들고 싶을지도 모른다. 이 경우 Portal을 이용한다. Portal의 이용 방법은 다음과 같다. import ReactDOM from 'react-dom'; ReactDOM.createPortal(component, real_obj) Portal을 생성하는 createPortal은 react-dom 안에 있다. 이제 원하는 컴포넌트를 index.js 파일에서 render을 사용하듯이 사용하면 된다.. 이전 1 2 3 다음
