[SeSSAC] 웹 풀스택 영등포 5기 과정_REACT(3)_ref,lifeCycle

안녕하세요

오늘은 React의 ref와 lifecycle에 대해 정리해보도록 하겠습니다.

 

 

---

0. REF

ref(참조)는 DOM의 구체적인 요소를 건드려야할 때 사용합니다.

 

 

 

물론 id 지정 후 요소를 호출 할 수 있지만

컴포넌트 단위로 반복 사용되는 React에서는 id가 중복되는 문제가 생깁니다.

 

 

 

class형 컴포넌트에서는 기본 기능으로 제공하지만, funcion 컴포넌트에서는 특별히 불러와야

사용이 가능하기 때문에 function 컴포넌트 위주로 정리하겠습니다.

 

 

다음은 ref를 사용하여 input 태그에 focus를 실행하는 간단한 컴포넌트 입니다.

import React, { useRef } from 'react';

export default function RefSample1() {
  const inputRef = useRef();

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>Focus</button>
    </div>
  );
}

 

구체적으로 해석해서 보도록 하겠습니다 !

 

import React, { useRef } from 'react';

export default function RefSample1() {
  // 1. ref 객체 만들기
  const inputRef = useRef();
  }

1. 먼저 react모듈에서 useRef를 구조분해할당해서 가져온 다음, 

ref역할을 수행 할 객체를 새로운 변수에 넣어서 만듭니다!

 

  return (
    <div>
      {/* 2. 직접 접근하고 싶은 DOM 요소에 ref props 설정 */}
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>Focus</button>
    </div>

2. 그 다음 return의 JSX에서 직접 접근하고 싶은 요소 (즉, input) 에 ref를 설정해줍니다. 

그리고 어떤 이벤트를 통해 focus을 일으킬 건지 onClick 함수를 통해 정의하고 있습니다.

 

  const handleFocus = () => {
    // *focus() : 지정된 html 요소에 포커싱
    inputRef.current.focus();
  };

3. 여기서 onClick 이벤트가 일어날 때

어떤 이벤트를 일으킬 건지 inputRef 객체를 통해 명확히 하고 있습니다.

 

inputRef를 JSX에서 input태그에 직접 지정을 해주었기 때문에,

inputRef.current는 콘솔로 출력해보면 하기와 같이 찍힙니다.

<input type="text">

즉, inputRef.current.focus를 하게 된다면, 해당 input태그에 focus가 되게 되는 것이죠.

 

 

---

생각보다 로직이 정확하고 간단합니다.

그래서 예시 하나만 더 보도록 하겠습니다 :D

 

import React, { useRef } from 'react';

export default function RefSample2() {
  const id = useRef(7);

  const plusIdRef = () => {
    id.current += 1;
  };

  return (
    <div>
      <p>버튼 클릭시 id 값을 1씩 증가</p>
      <h2>{id.current}</h2>
      <button onClick={plusIdRef}>Plus</button>
    </div>
  );
}

이 예시는 7이라고 초기화한 ref를 버튼을 눌렀을 때 1씩 증가하도록 하는 간단한 함수형입니다.

import React, { useRef } from 'react';

export default function RefSample2() {
  const id = useRef(7);
  }

첫 번째 예시와 마찬가지로 useRef를 react에서 import해 오고 있습니다.

그리고 id라는 변수에 useRef(7) 로 id를 7로 초기화 셋팅해주었습니다. 

 

  return (
    <div>
      <p>버튼 클릭시 id 값을 1씩 증가</p>
      <h2>{id.current}</h2>
      <button onClick={plusIdRef}>Plus</button>
    </div>
  );

그리고 JSX에 버튼과 id의 current값(7)을 보여주도록 했습니다.

버튼을 눌렀을 때 동작할 함수도 만들어 주었습니다.

 

  const plusIdRef = () => {
    id.current += 1;
    console.log(id.current);
  };

이는 id.current값을 1씩 증가시키므로, 결국 ref속성을 가진 id값이 1씩 증가하는 것을

console.log()로 직관적으로 찍어주었습니다.

 

이를 실행하면 console.log에는 id.current 값이 1씩 증가하는 것을 잘 볼 수 있지만,

정작 h2 태그 안에 있는 id.current값은 변하지 않습니다. 

 

ref는 state와 달리 ref의 값 변경을 감지하지 않기 때문에 렌더링을 다시 진행하지 않습니다.

만약 상태를 즉각 직관적으로 알고 싶다면 ref보다는 state를 쓰는 것이 좋습니다.

 

---

 

1. lifeCycle

lifeCycle은 말 그대로 [생명 주기]입니다.

 

어떤 생명의 주기이느냐? 바로 React의 Componenet입니다.

말을 안듣는 걸보면 진짜 생명이 있을지도?ㅎ

 

이 라이프 사이클은 여러 모로 중요한 역할을 하는데,  제가 현재 가장 와닿는 역할은 바로

 

"state나 props에 따라 변경을 감지하고 변화가 일어났을 때

필요한 동작을 수행할 수 있고, 불필요한 동작을 수행하지 않을 수 있다는 점"

 

입니다.

 

 

이 아래의 그림은 생명주기를 나타낸 그림입니다.

 

Mount:  DOM이 생성되고 웹 브라우저에 나타남
Update: props/ state가 바뀌었을 때 업데이트함
Unmount: 컴포넌트가 화면에서 제거됨

 

이 lifeCycle을 적극적으로 활용하여 효과적으로 변화에 대응하거나, 자원을 아끼려면

함수형 컴포넌트에서는 useEffect를 사용해야합니다.

 

useEffect(() => {
  console.log('컴포넌트 마운트!!!'); 
}, []);

이 예제는 Component의 일부로, useEffect 함수를 보여줍니다.

useEffect(() => {
  // 부수 효과를 수행하는 코드
  // 이 부분에서 데이터 가져오기, DOM 조작, 이벤트 리스너 등록 등의 작업을 수행할 수 있습니다.
}, [dependencies]);

useEffect를 마운트(DOM생성) 시점에 console.log를 실행할 때는

dependencies에 아무 요소도 넣지 않고, 빈 배열 [ ] 을 넣어주면, 이 컴포넌트가 마운트할 때마다

console.log에 '컴포넌트 마운트!!!'라고 찍히게 됩니다.

 

 

반면, 빈 객체도 아니라, 아예 아무것도 넣지 않게 되면,

  useEffect(() => {
    console.log('컴포넌트 마운트or업데이트!');
  });

마운트(DOM 생성) 하거나 Update할 때 마다 console이 찍히게 됩니다.

 

 

반면에 dependencies를 넣게 된다면,

  useEffect(() => {
    console.log('input 상태가 변경됨에 따라 컴포넌트 업데이트');
  }, [input]); // 의존성은 input에 있음

input이라는 변수가 마운트되거나 update될 때에만 console이 찍히게 됩니다.

 

input과 관계없는 변수나 컴포넌트가 마운트되거나 update되거나 언마운트가 되어도 console은 찍히지 않습니다.

---

 

+ 이 외에 클래스형 컴포넌트에서 lifeCycle을 사용할 때는 내장된 메서드를 사용합니다.

useEffect처럼 불러오는 것이 아니라 바로 사용하면 됩니다..

 

클래스형 컴포넌트 자체도 별로 사용하지 않지만, 그 중에서도 그나마

자주 사용하는 메서드는 하기에 있는 세 가지 메서드입니다.

 

• componentDidMount

: 컴포넌트가 DOM에 마운트된 후에 호출됩니다.

즉, 컴포넌트가 화면에 표시되고 사용자와 상호작용할 수 있는 상태가 되었을 때 실행됩니다.

주로 초기 데이터 가져오기, 외부 리소스 로딩, 이벤트 리스너 등록 등의 초기화 작업에 사용됩니다.

 

• componentDidUpdate 

: 컴포넌트가 업데이트된 후에 호출됩니다.

업데이트가 발생한 후 컴포넌트의 상태나 프롭스가 변경되었을 때 실행됩니다.
주로 이전 상태 및 프롭스와 현재 상태 및 프롭스를 비교하여

 변경된 내용에 대한 작업을 수행하거나, 외부 데이터 업데이트 및 DOM 조작 등의 업데이트 작업에 사용됩니다.

 

• componentWillUnmount 

: 컴포넌트가 DOM에서 언마운트되기 전에 호출됩니다. 즉, 컴포넌트가 화면에서 사라지기 전에 실행됩니다.
주로 이벤트 리스너 해제, 타이머 해제, 리소스 정리 등 컴포넌트 정리 작업에 사용됩니다.