[TIL] 241118_React: createRef와 useRef에 대하여

지코·2024년 11월 19일

Today I Learned

목록 보기

54/66

⚡️ createRef()란?

특정 노드나 컴포넌트에 reference 값을 만들어주며, 이를 이용해 노드나 리액트 요소에 접근하여 값을 얻어낼 수 있다.

createRef()는 React의 클래스 컴포넌트에서 사용하며, createRef()로 생성한 객체를 다른 태그의 ref 속성으로 전달한다. 그럼 객체의 current 속성을 해당 태그의 DOM 노드가 차지하게 된다.

예를 들어 OrderForm 컴포넌트 코드의 일부를 살펴보자.
생성자 함수 안에서 createRef()를 통해 formRef 객체를 만들었다. createRef()는 인수로 아무 것도 받지 않는다. 따라서 초기값이 무조건 null 로 설정된다.

render() {
    return (
      <form
        className="OrderForm"
        id="order-form"
        onSubmit={this.handleSubmit}
        ref={this.formRef}
      >
        <FormControl label="주소" htmlFor={"deliveryAddress"} required>
          <input
            type="text"
            name="deliveryAddress"
            id="deliveryAddress"
            placeholder="배달 받을 주소를 입력하세요"
            required
            autoFocus
          />
        </FormControl>
// ... 이하 생략

render() 메서드를 살펴보면 input 태그가 name 속성을 가지고 있는 것을 확인할 수 있는데, 이를 통해 사용자가 입력한 값들을 가져오기 위해 getInputValueByName 함수를 구현한 것이다. 또한 form의 ref 속성에 formRef 객체를 지정한 것을 확인할 수 있다.
여기서 입력한 값을 가져올 때 formRef 객체의 current 속성을 사용하고, 인수로 받은 name 값에 해당하는 input 태그에 사용자가 입력한 값을 가져와 반환한다.

handleSubmit(e) {
    e.preventDefault(); // 리렌더링 방지

    const deliveryAddress = this.getInputValueByName("deliveryAddress");
    const deliveryContact = this.getInputValueByName("deliveryContact");
    const paymentMethod = this.getInputValueByName("paymentMethod");
    const messageToShop = this.getInputValueByName("messageToShop");
    const messageToRider = this.getInputValueByName("messageToRider");

    this.props.onSubmit({
      deliveryAddress,
      deliveryContact,
      paymentMethod,
      messageToShop,
      messageToRider
    });
  }