Ref / Effect

컴포넌트가 특정 정보를 ‘기억’하도록 하고 싶지만 해당 정보가 새 렌더링을 촉발하지 않도록 하려는 경우 ref를 사용할 수 있다.

ref 와 state의 차이점

ref는 내부에서 어떻게 작동하나요?

// Inside of React
function useRef(initialValue) {
  const [ref, unused] = useState({ current: initialValue });
  return ref;
}

첫 번째 렌더링 중에 useRef는 {current: initialValue}를 반환합니다. 이 객체는 React에 의해 저장되므로 다음 렌더링 중에 동일한 객체가 반환됩니다.

ref로 DOM 조작하기

React 는 렌더링 출력과 일치하도록 DOM을 자동으로 업데이트하므로 컴포넌트가 자주 조작할 필요가 없습니다. 하지만 때로는 노드에 초점을 맞추거나 스크롤하거나 크기와 위치를 측정하기 위해 React가 관리하는 DOM 요소에 접근해야 할 수도 있습니다.

노드에 대한 ref 가져오기

1. React가 관리하는 DOM 노드에 접근하려면, 먼저 useRef 훅을 불러오기

import { useRef } from 'react';

2. 컴포넌트 내부에서 ref를 선언

const myRef = useRef(null);

3. DOM 노드를 가져올 JSX태그에 ref 속성으로 참조를 전달

<div ref={myRef}>

Effect란 무엇이며 이벤트와는 어떤게 다른가요?

• 렌더링 코드는 컴포넌트의 최상위 레벨에 있습니다. 여기서 props와 state를 가져와 변환하고 화면에 표시할 JSX를 반환합니다.

• 이벤트 핸들러는 컴포넌트 내부에 있는 함수로, 계산만 하는 것이 아니라 별도의 작업도 수행합니다.

Effect 작성 방법

1. Effect를 선언합니다.

2. Effect의 의존성을 명시합니다.

3. 필요한 경우 클린업을 추가합니다.

Step 1 : Declare an Effect

import { useEffect } from 'react';

function MyComponent() {
	useEffect(() => {
		// 여기의 코드는 매 렌더링 후에 실행됩니다.
});
return <div />;

1. React에서 useEffect 훅을 import합니다.

2. 컴포넌트의 최상위 레벨에서 호출하고 Effect 내부에 코드를 추가합니다.

컴포넌트가 렌더링될 때마다 React는 화면을 업데이트하고 useEffect 내부의 코드를 실행합니다. 즉, useEffect는 해당 렌더링이 화면에 반영이 될 때까지 코드 조각의 실행을 “지연”합니다.

Step 2 : Specify the Effect dependencies

• 때로는 속도가 느릴 수 있습니다. 외부 시스템과의 동기화가 항상 즉각적인 것은 아니므로 꼭 필요한 경우가 아니라면 동기화를 건너뛰는 것이 좋습니다.

• 때로는 잘못된 경우가 있습니다.

useEffect(() => {
    // ...
  }, []);

useEffect 호출의 두 번째 인자로 의존성 배열을 지정하여 React가 불필요하게 Effect를 다시 실행하지 않도록 지시할 수 있습니다.

useEffect(() => {
  // This runs after every render
  // 렌더시마다 실행됩니다.
});

useEffect(() => {
  // This runs only on mount (when the component appears)
  // 오직 마운트시(컴포넌트가 나타날 때)에만 실행됩니다.
}, []);

useEffect(() => {
  // This runs on mount *and also* if either a or b have changed since the last render
  // 마운트시 뿐만 아니라 a 또는 b가 직전 렌더와 달라졌을 때에도 실행됩니다.
}, [a, b]);

Step 3 : Add cleanup if needed

useEffect(() => {
    const connection = createConnection();
    connection.connect();
  }, []);

useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []);

Effect의 생명주기

• 컴포넌트는 화면에 추가될 때 마운트됩니다.

• 컴포넌트는 props나 state를 받으면 업데이트됩니다.

• 화면에서 제거되면 컴포넌트가 마운트 해제됩니다.