Props와 State와 Ref

🤵 State와 Ref의 차이가 무엇인가요?
🙎 ???
🤵 이런 상황에서 ref의 값이 변경된다면 다시 렌더링이 될까요?

function MyComponent() {
  const ref = useRef(3)
  return <div>{ref.current}</div>
}

Props

Props는 Properties의 줄임이다. 컴포넌트의 옵션이나 설정과 같은 값으로, 상위 컴포넌트로부터 전달되며 불변하는 값이다. 따라서 컴포넌트는 props 값을 변경할 수 없으나 자식 컴포넌트에게 props 값을 전달할 수는 있다.

State

State는 컴포넌트가 마운트될 때 기본값을 가지고 생성되고, 변경될 수 있는 값이다. 보통 유저 이벤트를 통해서 변경된다. 컴포넌트는 자신의 state를 내부적으로 관리한다. state는 private한 값이라고 할 수 있다. 컴포넌트가 state를 꼭 가져야 할 필요는 없다. state는 복잡성을 높이고 예측가능성을 낮추므로 state를 너무 많이 쓰지 않을 것을 권장하기도 한다.

• 컴포넌트 내에서 props 값과 state 값에 접근하면 현재 렌더링된 값을 반환
• 직접 State를 수정하면 컴포넌트를 렌더링하지 않음 (직접 state를 지정하는 것은 클래스 컴포넌트의 constructor 안에서만 가능)
• setState()를 사용해서 state가 변경되면 컴포넌트를 다시 렌더링함
• setState()는 비동기적일 수도 있음. 어떤 이벤트 핸들러에서 setState()를 호출했다고 해도, 그 변경은 즉시 일어나지 않을 수 있고, 모든 컴포넌트가 자신의 이벤트 핸들러에서 setState()를 호출할 때까지 기다린다. 불필요한 렌더링을 하지 않기 위해서임.

Ref

render 메서드를 통해 생성된 DOM 노드 혹은 React 엘리먼트에 접근하기 위해 사용한다.

클래스 컴포넌트 기준으로,

• 생성: this.myRef = React.createRef()
• 전달하기: jsx에서 <div ref={this.myRef} />
• 접근하기: const node = this.myRef.current

엘리먼트에 ref를 전달하면, 노드를 향한 참조는 ref.current에 담긴다.

함수 컴포넌트에서는 useRef() hook API로 ref을 사용할 수 있다.

• 생성: const ref = useRef(null)
• 전달하기: <input ref={ref} type="text" />
• 접근하기: ref.current.focus();

useRef()에서 만들어지는 ref 객체는 DOM ref만을 위한 것이 아니다. ref 객체는 변경할 수 있고 어떤 값이든 보유할 수 있는 프로퍼티를 가진 일반 컨테이너이다. class의 인스턴스 프로퍼티와 유사하다. 그래서 setInterval 같은 인터벌을 사용할 때 유용하다.

  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

useRef()로 만들어지는 ref 객체는 순수 자바스크립트 객체이다. 그러나 일반 객체와 다른 점은, ref 객체는 렌더링이 되어도 항상 동일한 ref 객체를 반환한다.
useRef()은 그 내용이 변경될 때 변경된 사실을 알리지 않는다. 즉, ref.current 프로퍼티가 변경되었다고 해서 리렌더링이 일어나지 않는다. 그래서 질문의 상황에서는 렌더링이 다시 일어나지 않는다는 것이 정답이다.

버튼 클릭을 해도 리렌더링이 되지 않기 때문에 숫자가 늘어나지 않지만, 콘솔에는 변경된 ref.current 값이 계속 출력되고 있다.