[React] React에서 사용자 입력을 컨트롤 하는 두 가지 방법 (state vs ref)

대부분의 웹 사이트에는 사용자의 입력을 활용한다.

따라서 사용자 입력값을 컨트롤하는 것은 매우 중요한 주제이다.

 

리액트에도 당연히 사용자 입력값을 컨트롤하는 방법이 존재한다.

그것도 두개나...

 

하나는 이미 state를 살펴보면서 알아보았다.

(https://joseph0926.tistory.com/19#2.%20%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%9E%85%EB%A0%A5%EA%B0%92%20%EC%BB%A8%ED%8A%B8%EB%A1%A4-1)

이 방법은 사용자 입력을 컨트롤 하는 훌룡한 방법이지만, 약간의 단점도 존재하고 상황에 따라 맞지 않을 수 있다.

이럴때 대안으로 생각해볼수있는 것이 "ref"다.

 

이번 글에서는 기존에 알고있던 사용자 입력값 컨트롤 방법을 다시 자세히 살펴보고,

다른 대안인 "ref"도 살펴보자

 

이 글에서 알아볼 것

• state를 활용한 사용자 입력값 컨트롤
• ref를 활용한 사용자 입력값 컨트롤
• 제어되지 않는 컴포넌트

 

1. state를 활용한 사용자 입력값 컨트롤

앞선 글에서 살펴보았지만,

그 글에서 다루지 못한 몇가지 내용을 간단히 다뤄보겠다.

 

• onChange prop
  • state를 활용한 사용자 입력값 컨트롤은 onChange prop에서부터 시작된다.\
  • 이 prop은 키입력 하나하나마다 트리거된다는 특징이 존재했다.
    • 즉, 키 하나를 입력하면 헨들러 함수가 호출되는 것이다.
  • 이러한 작동 방식이 필요하고, 필수적으로 요구되는 상황도 분명 존재하겠지만, 아닌 경우도 존재할 것이다.
    • 예를들어, 사용자 입력에 대한 복잡한 유효셩 검사를 실행하는데, 이 복잡한 함수가 키입력 하나마다 호출되면 성능문제등이 발생할 수 있다.
  • 그렇다면 사용자 입력이 끝났을 때, 그 값을 가져오는 방법은 없을까?
    • 이때 사용되는 것이 "ref"다

 

2. ref를 활용한 사용자 입력값 컨트롤

• ref란?
  • DOM 요소에 접근하여 그것들로 작업할 수 있게 해주는 기능
    • 즉, 요소와 자바스크립트를 연결해주어 작업할수있게 해준다
• ref 사용법 => useRef 훅
  1. ref 기능을 사용하기 위해 useRef 훅을 임포트해온다
  2. ref 기능을 사용하기 위한 html 요소에서 ref 속성을 추가한다
     • ref 속성은 어느 html 요소에나 추가할 수 있다 (여기서는 input 태그라 가정)
  3. const nameInputRef = useRef(); 로 useRef를 사용한다.
     • 이렇게 생성된 ref의 값은 항상 객체다
     • 또한 해당 객체에는 current라는 프로퍼티가 존재한다
       • current 프로퍼티는 ref를 통해 연결된 요소의 실제 값을 갖는다 (기본값은 undefind)
       • 이 current 프로퍼티를 통해 여러값을 조작할 수 있지만, 하지 않는 것이 권장된다..왜냐하면 리액트 사용 이유 중 하나가 리액트를 활용하여 값을 조작하려는 것인데, 그걸 직접 해버린다면,,,의미가 없어진다.
  4. 2번에서 추가한 ref에 ref={nameInputRef}
     • 이로써 ref를 통해 DOM요소와 자바스크립트가 연결된것이다
     • 이렇게 설정하면 nameInputRef에 들어있는 current 값은 실제 DOM 요소가된다 (여기서는 input)
  5. const enteredName = nameInputRef.current.value;
     • 만약 이게 input 요소와 연결되어있다면 current를 통해 input 요소의 value 속성에 접근할 수 있다
• 사용자 입력값을 다룰 때 ref 특징
  • input 태그의 value 속성은 입력값 전체다. (state 입력값 컨트롤 양방향 바인딩에서 확인한적이 있다)
    • 따라서, ref를 사용하면 입력이 끝났을 때의 값을 활용할 수 있다.
• ref 사용시 단점
  • state를 사용했을 때, 마지막에 form 제출 후 입력값을 초기화해주는 것이 기억날것이다.
    • 그때는 단순하게 양방향 바인딩과 업데이트 함수를 활용하면 간단하게 구현할 수 있었다.
  • 하지만, ref를 이용하면 조금 까다롭다.
    • 위의 사용법을 잘 이해했다면, 까다롭다는 말이 이해가 가지 않을것이다.
    • ref는 이미 input 태그의 value값에 접근할 수 있으므로, nameInputRef.current.value=”” 으로 초기화 하면 되는거 아닌가라고 생각할 수 있다.
      • 맞는 말이고, 실제로 이렇게 초기화한다.
      • 다만, 이러면 "제어되지 않는 컴포넌트"가 된다.

 

그래서 결국 사용자 입력값을 컨트롤할 때 state를 써야하는지 ref를 써야하는지 모르겠다면,, 이것만 기억하자

• 값만 읽고 싶을때는 ref가 권장된다
• 키 입력하나하나를 읽고 싶을때는 state가 권장된다

 

 

3. 제어되지 않는 컴포넌트

 

ref 마지막에 단점을 알아보면서 "제어되지 않는 컴포넌트"라고 언급하였다.

무슨 뜻일까?

• ref를 사용하기 위해서는 분명 리액트 훅인 useRef를 사용하긴 하지만, 그게 끝이다. 단지 데이터를 가져오는데 사용될 뿐이다.
• ref를 사용하면 다시 데이터를 돌려보내는등의 작업에는 리액트 기능을 사용하지 않는다
  • ref 단점에서 살펴봤듯, ref를 통해 입력값을 초기화하려면 nameInputRef.current.value=””처럼 해야하는데, 이는 네이티브 DOM 요소를 직접 건드리는 것이다 (리액트 사용 x)
    • 이는 ref 사용법 3번에서 말했듯이 권장되지 않는 접근법이다...
• 이렇게 리액트를 활용하는것이 아닌, DOM 요소를 직접 건드리는 것을 "제어되지 않는 컴포넌트"라 한다.

그러면 ref를 저렇게 초기화하는 것은 잘못된것이고, ref를 사용하면 초기화를 못하는 것일까?

-> 그건 아니다..오직 사용자 입력값을 초기화하는데만 사용하기때문