React - Ref & Life Cycle(생명 주기)

웹 프론트엔드

토리쟁이 2024. 3. 30. 23:50

이번 포스팅에서는 Ref와 Life Cycle에 대해 공부해볼 것이다.

html에서 특정 요소에 접근하기 위해서는 어떻게 할까?

html에서는 원하는 요소에 고유한 값을 갖는 id 속성을 할당하여 해당 id 값을 갖는 특정 요소에 직접 접근한다.

반면, react에서는 ref를 사용하여 특정 요소에 접근한다.

ref에 대해 자세히 공부하기 전에, 왜 react에서도 html과 같이 id를 활용하여 특정 요소에 접근하는 방식을 사용하지 않는지에 대해 먼저 알아보자.

react에서도 id를 사용할 수 있다. JSX 안에서 DOM에 id를 할당하면 해당 DOM을 렌더링할 때 그대로 적용이 된다. 하지만, 특수한 경우가 아니라면 권장하지 않는 방법이다. 왜일까?

react는 UI 전체를 컴포넌트로 쪼갠다는 특징이 있다. 이러한 특징 때문에, react는 유지보수가 용이하고 재사용성이 좋다는 장점을 가진다. 즉, react에서 컴포넌트의 재사용은 빈번히 일어나곤 한다.

html에서 DOM의 id는 유일해야 하는데, 컴포넌트가 재사용되는 경우, 중복 id를 가지는 요소가 생성되어 버리기 때문이다.

그렇기 때문에, 컴포넌트 내부에서만 작동하는 ref를 이용한다.

ref

클래스형 컴포넌트에서의 ref 사용방법과 함수형 컴포넌트에서의 ref 사용방법이 다르다.

클래스형 컴포넌트에서의 ref 사용방법은 다음과 같다.

1. 콜백 함수 이용

2. 내장함수 createRef 이용

함수형 컴포넌트에서는 ref를 기본적으로 제공하지 않기 때문에, hook으로 useRef()를 이용한다.

반드시 import 해서 사용해야 한다.

import {useRef} from "react";

지난 포스팅에서는 state에 대해 다뤘었는데 변수와 state와 ref의 차이점을 정리하면 다음과 같다.

라이프사이클(Life Cycle)

useEffect()

참고 - ref

참고 - life cycle

printf("Hello dev_TORY!");