react hook3 React Hook useRef 배열에 담기, useRef 리스트로 만들기 기본 활용 변수에 담아서 사용 createRef() 메소드로 변수 안에 useRef hook을 생성하고 map 함수로 리스트마다 useRef hook을 한 개씩 할당하는 방법 import React from "react"; export default function App() { const values = [ { id: 1, text: "hello world", refs: React.createRef() }, { id: 2, text: "hello world", refs: React.createRef() }, { id: 3, text: "hello world", refs: React.createRef() } ]; const clickHandler = (index) => { console.log(value.. 2021. 10. 24. React Hook useRef 메소드 사용하기 useRef란? React Hook의 한 종류 용도 1. 특정 DOM에 접근할 때 사용한다. 이는 useEffect 메소드와 document.queryselector 메소드를 같이 사용하는 것과 같다. 2. 컴포넌트 안에서 변하지 않는 변수를 사용하고 싶을 때 사용한다. 일반적으로 컴포넌트 안에 변수를 선언할 경우 const App = () => { let testValue = 1; const onClickHandler = () => { testValue += 1; }; return ( } 또는 let testValue = 1; const App = () => { const onClickHandler = () => { testValue += 1; }; return ( } 리랜더링이 될 때 마다 변수가 재.. 2021. 8. 3. React Hook이란? React Hook이란? React 16.8 버전부터 등장한 개념으로 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이기 때문에 React Hook이라고 부릅니다. 기존 Class형 문법에서 사용하던 componentDidMount, componentDidUpdate 등의 메서드를 대체합니다. React Hook 기능은 Class 안에서는 동작하지 않습니다. lifecycle features란? React의 컴포넌트에서 생성, 업데이트, 제거의 흐름 시작 -> 마운트 -> 업데이트 -> 언마운트 Side effect란? React 컴포넌트 안에서 외부의 데이터를 가져오거나 DOM을 직접 조작하는 작업을 “si.. 2021. 8. 3. 이전 1 다음