React에서의 코드 스타일 vs JS 코드 스타일

(10-10 simple-ajax의 titanic/index.js 코드)
Q1.
현재 이런 React JSX 코드가 있어.
그런데, 드롭다운 메뉴에 있는 값을 읽어오는 함수에서,

const choice=e.currentTarget.value;​

이렇게 드롭다운 메뉴에 있는 값을 한 번에 가져오고 있는데,

JS에서는

const current = e.currentTarget;
const choiceIndex = current.selectedIndex;
const choice = current[choiceIndex].value;

 

이렇게 가져와야 한다고 설명을 들었어.

왜 React에서만 해당 방식으로 드롭다운 메뉴의 값을 가져올 수 있는 것인지 설명을 해줘.

 

 

 

A1.

ChatGPT의 말:

 

React에서 e.currentTarget.value를 통해 드롭다운 메뉴의 값을 한 번에 가져올 수 있는 이유는 React가 Synthetic Event를 통해 DOM 이벤트를 래핑(wrapping)하고, 드롭다운 <select> 요소의 동작을 간편화했기 때문입니다.

1. JS 방식과 React 방식의 차이

Vanilla JS 방식

• 표준 HTML <select> 요소에서 선택된 값을 가져오려면, 다음 단계가 필요합니다:
  1. 이벤트 객체에서 currentTarget을 가져옵니다.
  2. 현재 선택된 <option>의 index를 가져옵니다 (selectedIndex).
  3. 선택된 <option>의 value 속성을 참조합니다.

이 과정은 표준 DOM API를 사용하는 방식으로, <select> 요소의 작동 방식에 맞추어 다소 번거롭게 값을 가져오는 구조입니다.

const current = e.currentTarget; 
const choiceIndex = current.selectedIndex;
const choice = current[choiceIndex].value;

React 방식

• React의 Synthetic Event는 표준 이벤트를 추상화하여 브라우저 간의 불일치를 해결합니다.
• <select> 요소에서 value 속성은 현재 선택된 값을 직접 반영합니다. 따라서 React에서 드롭다운 값은 e.currentTarget.value로 바로 가져올 수 있습니다.

const choice = e.currentTarget.value;

 

React는 기본 DOM 속성(value)과 연계하여 선택된 값을 간편하게 읽을 수 있게 최적화된 인터페이스를 제공합니다.

---

2. React가 가능하게 만든 이유

1. value 속성의 특성 활용
   • React의 <select>는 DOM의 기본 동작을 유지하면서도 value 속성에 현재 선택된 옵션 값을 직접 반영합니다. 그래서 별도의 selectedIndex를 확인할 필요 없이 value를 사용하면 됩니다.
   • 이는 React의 컨트롤드 컴포넌트 설계 철학과도 일치합니다.
2. Synthetic Event의 추상화
   • React의 Synthetic Event는 네이티브 이벤트 객체의 공통적인 동작을 추상화합니다.
   • 이벤트 객체의 currentTarget.value 속성은 React에서 <select> 요소의 선택된 값을 직접 제공하도록 최적화되어 있습니다.

---

3. 왜 Vanilla JS는 복잡한가?

• 네이티브 DOM API는 <select>의 동작을 세밀하게 제어할 수 있도록 설계되어 있지만, 이를 사용하려면 선택된 option을 수동으로 찾아야 합니다.
• currentTarget.value는 네이티브 DOM API에서 바로 제공되지 않고, selectedIndex와 같은 속성을 통해 option에 접근해야 하는 번거로움이 있습니다.

---

4. React의 장점

React에서는 이벤트 핸들러와 상태 관리가 통합적으로 작동하도록 설계되어 있어, <select>의 값 읽기가 간편해졌습니다. 이 방식은:

1. 코드 간결성
2. 상태 관리와의 자연스러운 연결
3. 브라우저 간 일관성 유지 등의 장점을 제공합니다.

따라서 React에서는 e.currentTarget.value만으로 선택된 값을 바로 사용할 수 있습니다.

 

 

 

Q2.

나의 말:

 아직 프로그래밍 전반에 대한 이해도가 부족한 나는, 네가 정확히 무슨 말을 하는지 잘 모르겠어. 그래서 일단 내가 이해한 바로는, JS와 차별되는, 이러한 React의 규칙이 있기 때문에, JS에서는 안되던 방식이, React에서는 된다라고 이해를 했는데, 내가 대략적으로 이해한 내용이 맞는지, 그리고 이해하기 위한 키워드만을 네가 짚어준다고 했을때, 어떤 키워드를 나에게 알려줄 것인지, 그리고 그 키워드에 대해서 가능하다면 핵심만 짚어서 짧게 설명해줬으면 좋겠어.

 

 

 

A2.

ChatGPT의 말:

 

네가 이해한 내용은 대체로 맞아! React에서는 기본적으로 DOM 이벤트를 관리하는 방식이 JavaScript의 표준 DOM API와 조금 다르게 최적화되어 있어서, 더 간단하게 값을 가져올 수 있도록 만들어져 있어. 이를 이해하기 위한 주요 키워드와 간단한 설명을 짚어볼게.

---

키워드와 설명

1. Synthetic Event (합성 이벤트)
   • React가 브라우저 간의 차이를 없애고 일관된 이벤트 처리를 제공하기 위해 DOM 이벤트를 추상화한 것.
   • e.currentTarget.value처럼 간단하게 값을 읽을 수 있도록 최적화되어 있음.
2. Controlled Component (제어 컴포넌트)
   • React에서 <select>나 <input>의 상태를 컴포넌트의 state로 관리하는 방식.
   • DOM의 값을 직접 접근하기보다 React의 상태 관리 흐름을 따름.
3. value 속성의 직관성
   • React에서는 <select>의 선택된 값을 value 속성으로 바로 노출함.
   • Vanilla JS에서는 이를 수동으로 찾아야 하지만, React는 이 과정을 생략해줌.
4. 추상화 (Abstraction)
   • 복잡한 내부 동작을 숨기고, 사용자가 쉽게 사용할 수 있도록 제공하는 개념.
   • React가 DOM 이벤트 처리의 복잡성을 내부적으로 감추고 단순화함.

---

요약

React는 DOM 이벤트를 추상화하고 최적화했기 때문에, JS보다 더 간단하게 value를 바로 읽을 수 있음.

• 핵심 이유: Synthetic Event와 React의 상태 관리 철학 때문!
  React에서는 더 간단한 코드로 DOM 요소와 상호작용 가능하도록 설계했어. 😊

 

 

 

Q3.

혹시 가능하다면, Synthetic Event와 React의 상태 관리 철학의 어떤 부분때문에, 맨 처음에 물어본 것처럼 코드를 짧게 쓸 수 있게 된 것인지 알려줄 수 있어?

 

 

 

A3.

ChatGPT의 말:

 

좋은 질문이야! React에서 코드를 짧게 쓸 수 있게 만든 핵심 이유를 Synthetic Event와 React의 상태 관리 철학이라는 두 가지 관점에서 간단히 설명해볼게.

---

1. Synthetic Event가 기여한 점

React의 Synthetic Event는 브라우저의 네이티브 DOM 이벤트를 래핑(wrapping)하여, 이벤트 처리 방식을 일관되게 만들어줬어. 이것이 코드 간소화의 핵심 원인 중 하나야.

왜 더 짧게 쓸 수 있을까?

• value의 직접 노출: Synthetic Event는 브라우저마다 약간씩 다른 DOM 이벤트 동작을 통합해서, e.currentTarget에서 바로 value를 읽을 수 있게 해줌.
  • 예를 들어, <select>의 선택된 값을 찾기 위해 selectedIndex로 접근하는 과정을 내부적으로 처리해줌.
  • React는 사용자가 <select>의 value 속성을 읽으려고 할 때, "현재 선택된 값"을 바로 반환하도록 최적화함.

---

2. React의 상태 관리 철학

React는 상태 관리를 중심으로 동작하며, DOM을 직접 다루는 대신, 상태(state)를 통해 UI를 업데이트하는 방식을 선호해. 이 철학이 <select>의 값을 다룰 때 코드 간소화로 이어져.

왜 상태 관리 철학이 영향을 줄까?

• React는 **컨트롤드 컴포넌트 (Controlled Component)**를 지원함.
  • 즉, <select>와 같은 입력 요소의 값은 DOM이 아닌 React의 상태(state)와 연결됨.
  • 이 때문에, value 속성은 항상 React 상태와 동기화되고, React가 이 동작을 더 간단하게 처리함.
• 개발자는 DOM 상태와 React 상태 간의 변화를 동기화할 필요 없이, value 속성을 통해 바로 접근할 수 있음.

---

요약: 두 가지 관점에서 왜 간단해졌을까?

1. Synthetic Event:
   • 네이티브 DOM 이벤트의 복잡한 동작(예: selectedIndex로 값 찾기)을 내부적으로 추상화하고, value 속성을 간단히 반환하도록 구현했기 때문.
2. React의 상태 관리 철학:
   • DOM을 직접 다루는 대신, React 상태와 연결된 입력값(value)을 제공함으로써 코드가 짧고 직관적으로 변함.

---

이 두 가지가 맞물려서, React에서는 단순히 e.currentTarget.value로 드롭다운 값을 바로 가져올 수 있는 거야. React의 철학은 "복잡한 내부 동작은 숨기고, 개발자가 간단한 인터페이스로 문제를 해결하게 하자"라는 관점으로 이해하면 좋아! 😊