[TIL] State 끌어올리기 / useRef

State 끌어올리기

리액트에서는 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성하는데 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다.

 

형제 관계에 있는 컴포넌트들은 state를 전달할 방법이 없어 state를 계층 구조상 위로 끌어올려 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만들어야 한다. 이러한 방법을 State 끌어올리기라고 표현한다.

 

 

props기능을 이용해서 부모에서 자식 방향으로만 데이터를 전달할 수 있다. 그래서 데이터들은 항상 위에서 아래로 하나의 방향으로만 흐르게 된다. 이를 단방향 데이터 흐름이라고 부른다.

 

useRef

useRef란?

useRef 메서드는 레퍼런스를 사용하기 위한 훅이다.

 

리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다.

 

useRef를 이용하면 컴포넌트가 렌더링하는 특정 DOM 요소에 접근할 수 있고 해당 요소를 조작하는 것도 가능하다.

useState와 비교

useState와 컴포넌트 내부의 변수로 활용 가능하다는 점은 동일하다.

 

하지만 useState는 값이 변경되면 컴포넌트를 리렌더링 하고 useRef는 값이 변경되더라도 컴포넌트를 리렌더링 하지 않는다.

 

useRef 사용법

const inputRef = useRef();

return <input ref={inputRef} />;

 

useRef를 사용해서 레퍼런스 객체를 반환하고 그 객체를 태그에 넣으면 된다.

 

레퍼런스 객체의 current 속성을 이용하여 현재 참조하고 있는 요소에 접근할 수 있다.

 

 

출처 : 한 입 크기로 잘라먹는 React