React의 Synthetic Event, Controlled Component로 인한 JS와의 차이

언어 및 도구들 공부/React

React의 Synthetic Event, Controlled Component로 인한 JS와의 차이

Dr.Mlem 2024. 12. 6. 14:16

(React 10-11 simple-crud에서)

Q1.

리엑트에서,

어떤 form 태그에 input 태그 여러개가 있는데, 각각 name 속성에 id, dname, loc 를 부여했어.

이런 상황에서, form태그에 submit 버튼이 눌렸다고 가정할 때,

const current = e.currentTarget;

이렇게 이벤트가 걸린 본인을 가져오고 있는데,

순정 JS는 저렇게 코드를 가져올 수 있는지 없는지가 궁금하고,

안된다면 React와의 어떤 차이에 의해서 안되는지, 이게 첫 번째 궁금한 내용이고,

그 다음 궁금한 내용이,

해당 코드 이후, form 태그 안에 name속성에 id, dname, loc가 부여된 input 태그의 값을 가져오기 위해서

const id = parseInt(current.id.value);

const dname=current.dname.value;

const loc = current.loc.value;

이렇게 접근하고 있어.

이 접근 방식도 React만 가능한지, 순정 JS는 안되는지, 순정 JS가 만약 해당 방식으로 접근할 수 없다면, 순정 JS 와 React의 어떤 차이에 의해서 그렇게 되는지,

크게 이렇게 2개에 대한 대답을 해줬으면 해. 만약, 두 내용에 대하여서 겹치는 개념이 있다면, 가능하면 한 번에 대답해주면 좋겠어.

A1.

ChatGPT

몇 초 동안 Thought about React vs. Vanilla JS event handling

정리

e.currentTarget 사용 가능 여부:
- React: React의 이벤트 객체는 SyntheticEvent를 통해 관리되지만, currentTarget이라는 속성 자체는 브라우저 표준 이벤트 속성이기 때문에 React에서든, 순수 JS에서든 e.currentTarget 접근은 가능합니다. 단지 React에서는 이를 더욱 일관성 있게 다루기 쉽게 해줄 뿐입니다.
current.id.value 형태의 폼 데이터 접근:
- React: 리액트에서는 특정 상황에서 e.currentTarget (form 요소)에 연결된 name 속성 기반으로 쉽게 접근할 수 있는 경우가 있습니다. 하지만 이는 기본적으로 DOM API를 사용하는 것이 아니라 React의 이벤트 처리 흐름과 상황에 따라 가능하게 되는 방식입니다.
- 순정 JS(Vanilla JS): 순수 JavaScript에서도 e.currentTarget을 통해 현재 이벤트가 발생한 요소(예: form 요소)에 접근할 수 있습니다. 하지만 current.id.value처럼 form 요소의 하위 input에 바로 점(.) 접근을 하는 것은 불가능합니다. 순정 JS에서 form 내부의 input 값에 접근하려면 다음과 같은 방식으로 해야 합니다.
  - const form = e.currentTarget;
  - const id = parseInt(form.elements['id'].value);
  - const dname = form.elements['dname'].value;
  - const loc = form.elements['loc'].value;
다시 말해, 순정 JS에서는 form.elements[name속성값]을 통해 접근해야 하며, form.id.value와 같이 바로 속성처럼 접근하는 패턴은 지원되지 않습니다.

왜 이런 차이가 발생하는가?

React와 순정 JS의 이벤트 모델 차이:
React는 SyntheticEvent라는 추상화된 이벤트 시스템을 통해 브라우저별 이벤트 차이를 숨기고, 일관성 있는 이벤트 객체를 제공합니다. 하지만 e.currentTarget 자체는 Web 표준 이벤트 속성으로, React만의 고유 기능이라고 할 수는 없습니다. 즉, currentTarget은 React에서만 되는 것이 아니라 원래 DOM 이벤트에도 존재합니다. 다만 React에서는 synthetic event로 감싸 브라우저 호환성 문제를 완화시켜주고, 개발자가 해당 속성에 접근하기 더 일관되게 해주는 역할을 합니다.
DOM 접근 방식 차이:
순정 JS에서 폼 내부의 요소 값을 얻을 때는 form.elements 컬렉션을 통해 접근해야 합니다. 반면, React 예제 코드에서 current.id.value와 같이 접근하는 패턴은 사실 일반적인 DOM API 사용 패턴은 아닙니다.
이 패턴은 다음과 같은 상황에서 가능한데, 예를 들어 form 내부의 각 input에 ref를 달고, 그 ref를 통해 DOM 노드를 얻은 후 그 노드의 value에 접근하는 식입니다. 혹은 DOM 조작 대신 React state로 관리하는 Controlled Component 패턴을 쓰면, <input name="id" value={state.id} />와 같이 이미 상태(state)로 관리 중인 값을 쉽게 접근할 수 있습니다. 즉, React에서는 주로 상태와 양방향 바인딩을 통해 값을 얻고 세팅하지, 직접 DOM을 조작하는 패턴을 덜 쓰는 것이 일반적입니다.

정리하자면,

e.currentTarget: React나 순정 JS 모두 사용 가능.
current.id.value 형태의 접근: 순정 JS에선 불가능하며, 대신 form.elements['id'].value 식으로 접근해야 함. React에서 해당 형태가 가능해 보이는 것은 주로 React의 상태 관리나 ref, 또는 synthetic event로 인한 일관된 DOM 참조 방식을 통해 이루어진 것이지, 표준 DOM API 자체가 그런 식의 점표기법 접근을 제공하는 것은 아님.
따라서 이 차이는 React의 이벤트/상태 관리 방식과 순정 DOM API 접근 방식의 차이로 인한 것입니다.

Q2.

나의 말:

Synthetic Event와 Controlled Component 라는 개념은, 순정 JS에는 없고 React에만 있는 개념인건가?

그리고 가능하다면, 프로그래밍은 4개월, 특히 React를 접한지 1달이 안된 사람도 이해할 수 있게 설명해줄 수 있으면 좋겠어. 개념적인 설명보다는 예시를 통해서 소개하는게 차라리 이해하기가 그나마 나을거라고 생각해.
답변은 존댓말로 작성을 부탁해.

A2.

2/2

ChatGPT

1초 동안 Thought about Synthetic Event와 Controlled Component

답변: 네, Synthetic Event와 Controlled Component 개념은 순수한 자바스크립트(순정 JS)에는 없는, React에서만 사용되는 개념입니다. 이해를 돕기 위해 간단한 비유와 예시를 들어 설명드리겠습니다.

1. Synthetic Event(합성이벤트)란 무엇인가?

순정 JS에서 이벤트 처리:
예를 들어, 순정 JS에서는 버튼을 클릭하면 document.getElementById("myBtn")로 버튼을 찾고, myBtn.addEventListener("click", function(event) { ... }) 형태로 이벤트를 처리합니다. 이때 event는 브라우저가 직접 제공하는 "원본 이벤트"입니다.
브라우저마다 이벤트 객체의 속성이나 작동 방식에 약간씩 차이가 있을 수 있어, 개발자가 이를 직접 고려해야 할 수도 있습니다.
React에서 이벤트 처리:
React에서는 <button onClick={handleClick}>버튼</button>처럼 이벤트를 걸고, handleClick 함수에서 받는 event가 Synthetic Event입니다.
이 Synthetic Event는 React가 브라우저의 원본 이벤트를 "포장"한 것이며, 모든 브라우저에서 같은 방식으로 접근할 수 있게끔 React가 통일한 인터페이스를 제공합니다. 쉽게 말해, 브라우저별로 조금씩 다른 이벤트 객체를 React가 미리 정리해서 개발자에게 주는 것입니다.
비유: 원래 여러 언어로 된 안내문(이벤트 객체들)을 직접 읽어야 한다면, Synthetic Event는 이를 한글로 잘 번역해서 주는 통역가 같은 존재입니다. 개발자는 통일된 "번역본(합성이벤트)"을 받으니 신경 쓸 게 줄어들죠.

2. Controlled Component(제어 컴포넌트)란 무엇인가?

순정 JS에서 폼 값 처리:
순정 JS에서 <input>에 글자를 입력하면, 그 값은 DOM 안에 그냥 들어가 있을 뿐입니다. 우리가 값을 얻으려면 document.getElementById("myInput").value처럼 직접 DOM에서 가져와야 합니다.
즉, 값이 DOM 내부에 저장되고, 자바스크립트 코드는 필요할 때 꺼내오는 방식입니다.
React에서 Controlled Component:
React에서는 <input value={state변수} onChange={handleChange}> 식으로 "상태(state)"가 입력 값과 직접적으로 연결되도록 만듭니다.
이 말은, 입력 값이 DOM에 저장되는 게 아니라 React의 state 변수 안에 저장된다는 뜻입니다. 사용자가 글자를 칠 때마다 onChange 이벤트가 발생하고, React state를 업데이트해주면, 그 state를 다시 value로 넘겨주어 실제 화면에 반영되는 식입니다.
비유: 원래 키보드로 종이에 글자를 쓰듯이(순정 JS: 값이 DOM 안에만 존재) 했다면, Controlled Component는 키보드로 컴퓨터 프로그램(React state)에 입력하고, 컴퓨터 화면에 표시하는 것과 같습니다. 모든 입력이 React 상태에 기록되어 있기 때문에, 값이 언제 어떻게 변경되는지 100% 제어할 수 있습니다.
Controlled Component 예시:

function App() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);  // 입력이 바뀔 때 state 업데이트
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>현재 입력한 이름: {name}</p>
    </div>
  );
}

여기서 input에 글자를 입력하면 onChange가 호출되고, name이라는 state가 업데이트됩니다. 그 state를 다시 value로 넣어주기 때문에 화면의 input 값도 변하죠. 결국 값의 "진짜 원본"은 DOM이 아니라 state가 되는 겁니다.

왜 이게 좋을까?
입력값을 React가 직접 관리하면, 값이 언제 어떻게 바뀌는지 추적하기 쉬워지고, 폼 검증이나 입력 값 변환(예: 대문자로 변경) 같은 일을 구현하기가 훨씬 쉬워집니다.

정리:

Synthetic Event:
브라우저별로 다른 이벤트 객체를 React가 일관성 있게 다뤄주는 포장지와 같습니다. 이벤트 처리를 더 편하게 해주죠.
Controlled Component:
입력값을 DOM 대신 React의 state가 관리하게 만들어 개발자가 값의 흐름을 완전히 제어할 수 있게 하는 패턴입니다.

이 두 개념은 순정 JS에는 없는 React 고유의 개념입니다. 순정 JS에서는 이벤트나 입력 값을 DOM API로 직접 다루지만, React에서는 Synthetic Event, Controlled Component 개념을 통해 더 편리하고 일관된 방식으로 상태와 UI를 관리할 수 있습니다.