ref & useRef

• react에서 요소 선택을 할 때는 id나 ref를 지정해서 사용한다.
• id : 같은 컴포넌트를 반복적으로 사용한다면 중복이 발생한다. 고유한 값이 아니게 된다.
• ref : 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다. (중복되지 않는다.)
  • DOM을 직접적으로 건드려야 할 때 사용한다. (input에 focus를 주거나 scrollBox를 조작한다거나 등)
• 로컬 변수로도 사용이 가능하다. 로컬변수는 렌더링 되어도 값이 그대로 유지된다.
  • ref 가 변경되어도 컴포넌트는 렌더링 되지 않는다.

▶️ 함수형 컴포넌트 Ref 사용하기

import { useRef } from "react";

//ref객체를 만든다.
//return 값에 있는 {input}이라는 변수에 input이 담기게 된다.
const input = useRef();

//button 클릭 시 input에 focus 주기
const focusInput = () => {
    input.current.focus();
  };

//HTML 요소의 레퍼런스를 ref prop에 저장한다.
//ref에 변수 이름을 넣어준다. (선택하고 싶은 DOM에 ref 값으로 설정 하는 것)
//여기서 ref={input}은 useRef를 사용하기 위한 변수명이다. input태그라는 것이 아니다. 이름 맘대로!
...
return(
<>
<input type="text" ref={input} />
<button type="button" onClick={focusInput}> 버튼 </button>
</>
)

//useRef()로 만든 객채 안에 current가 실제 요소를 가르킨다.
//ref 값은 current까지 작성해줘야 접근이 가능하다.
console.log(input.current);

life Cycle

• 라이프사이클 ( LifeCycle )?
  • 모든 React Component 에 존재하는 생명 주기이다. 컴포넌트가 실행되거나, 업데이트 되거나, 제거 될 때 특정한 이벤트들이 발생한다. 이렇게 컴포넌트(프로그램)이 실행되고 종료되는 그 과정이라고 생각하면 된다.
    이미지출처
    

• Mount
  • DOM이 생성되고 웹 브라우저 상에 나타난다. (생성 될 때)
• Update
  • props, state 바뀌었을 때 업데이트한다. (업데이트 할 때)
• Unmount
  • 컴포넌트가 화면에서 사라질 때. (제거 할 때)

▶️ 함수형 컴포넌트에서의 life Cycle

• useEffect()를 사용해 Mount, Update, Unmount 시 특정 작업을 처리
• useEffect(콜백함수, 의존성 배열) 의 형태이다. 배열에 뭘 넣느냐에 따라 앞의 함수가 언제 실행 될 지 다르게 동작된다. 넣어도 되고 안넣어도 된다.

useEffect(effect, deps);
//effect : 렌더링 이후 실행 될 함수 (Mount, update)

//deps : 배열 값이 변하면 effect 함수를 실행한다.
//빈 배열 [] 일 경우, mount시에만 동작한다.
//생략 할 경우, mount, update시에 동작한다.
//배열에 원소가 있을 경우 [data], 배열 안의 data가 update시에 동작한다.

import { useEffect, useState } from "react";

function LifeCycle(props) {
  const { number } = props;
  const [text, setText] = useState("");

  //---useEffect(콜백함수, [의존성 배열])

  //---1. 의존성 배열이 빈 배열일 때.
  //mount시에 콜밸함수 실행시킨다.
  //콜백함수 내부에서 return 뒤에 오는 함수를 unmount시에 실행시킨다.
  useEffect(() => {
    console.log("function Component : ⭕ mount");

    return () => {
      console.log("function Component : ❌ unmount");
    };
  }, []);

  //---2. 의존성 배열을 전달하지 않을 경우.
  //mount & update시에 콜백함수를 실행시킨다.
  useEffect(() => {
    console.log("function Component : ✅ update");
  });

  //---3. 의존성 배열에 원소가 존재할 경우.
  //해당 원소가 update 될 때 마다 콜백함수를 실행시킨다. 
	//(해당 원소가 변경될 때 마다)
  useEffect(() => {
    console.log("function Component : ✅✅ text update");
  }, [text]);

  return (
    <>
      <h2>함수형 컴포넌트 LifeCycle 공부</h2>
      <div>number : {number}</div>
      <input
        type="text"
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
    </>
  );
}

export default LifeCycle;