리액트에서는 HTML의 긴 태그 statement들을 컴포넌트라는 도구를 통해서 코드를 간소화 시키고 재사용이 가능하도록 만들 수 있었다. 또한, 리액트에서는 'props'라는 도구를 이용해서 상위 컴포넌트와 하위 컴포넌트간에 attribute로 props 설정을 지정해서 넘겨줄 수 있다. 이를 통해서 다양한 동적인 프로그램 구현이 가능해진다.

간단하게 자바스크립트에서와 리액트에서의 버튼 클릭시 'onclick' 이벤트를 구현하는 예시로 비교를 해보겠다.

JS

const onClick = () => {
  console.log('버튼 이벤트 실행');
};

const btn = document.createEelement('button');
document.body.appendChild(btn);
btn.innerHtml = '실행'
btn.addEventListener('click', onClick);

JS에서 이벤트 실행 구현

1️⃣ button 태그 생성
2️⃣ button 태그를 document body 태그의 Child 태그로 세팅
3️⃣ button 태그의 context 입력
4️⃣ 이벤트 함수 생성하기 (hoisting 주의)
5️⃣ addEventListener로 button 태그에 이벤트 속성 달아주기

React

function ButtonSample ({onClick}) {
  return <button onClick={onClick}>실행</button>
}

function App () {
  const onClick = () => {
    console.log('버튼 이벤트 실행')
  }
  return (
  	<ButtonSample onClick={onClick}/>
  ); 
}

ReactDom.render(<App />, document.getElementById('root')))

React에서 이벤트 실행 구현

1️⃣ 하위 컴포넌트(button태그)와 상위 컴포넌트 생성
2️⃣ 컴포넌트 호출부분에서 onClick 속성으로 이벤트 함수 전달
3️⃣ button 태그에 onClick 속성값 주기
4️⃣ react virtual dom 에 렌더시키기

difference

자바스크립트에서 버튼의 클릭 이벤트 실행을 구현하는 부분에서 솔직히 큰 어려움은 없으나, 리액트와 비교해보았을 때 직관적이지가 않다. 리액트에서는 flow 자체가 명확한데 자바스크립트에서는 그런 부분이 부족해 보인다.