React useRef (2) 썸네일형 리스트형 React(리액트): useRef로 컴포넌트 안의 변수 만들기 이번에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법을 알아보자. 여기서 말하는 변수는 예를 들어 컴포넌트 안에서 'let' 키워드를 사용해서 어떤 변수를 선언한다고 가정해보자. 이렇게 변수를 선언하면 다음 리 렌더링 될 때 그 변수 값은 초기화된다. 만약 계속 유지하고 싶은 값을 관리하려고 하면 이전에 공부했던 useState를 사용해야 하는데 useState 같은 경우는 상태를 바꾸게 되면 컴포넌트가 리 렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꾸었을 때 굳이 리 렌더링 할 필요 없는 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. useRef는 이전에 우리가 특정 DOM을 선택해야 될 때 useRef라는 Hook을 사용한다고 공부했다. 이것외에도 컴포넌.. React(리액트): useRef로 특정 DOM 선택하기 HTML과 JavaScript를 사용할 때에는 우리가 특정 DOM을 선택해야 하는 상황에 getElementById() 또는 querySelector() 같은 DOM select 함수를 사용해서 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 선택해야 하는 상황이 생길 수 있다. 예를 들어 특정 element의 크기나 위치를 가져와야 하는 경우, 아니면 스크롤바 위치를 가져오거나 설정해야 하는 경우, 포커스를 설정해줘야 하는 경우 등 다양한 상황들이 있을 수 있다. Chart.js와 같은 그래프 관련 라이브러리를 사용하게 될 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 그럴 때는 리액트에서 'Ref'라는 것을 사용한다. 함수형 컴포.. 이전 1 다음
