-
React #0 바닐라 JS 의 단점과 구조 살펴보기프론트/React 2024. 7. 30. 20:37
HTML, CSS, JS 로 간단한 카운터 웹 페이지를 구현할때에는 HTML 에서는 span과 button 태그로 생성한 후 두개의 요소를 자바스크립트에서 찾고, 해당 요소에 이벤트를 걸어 감지될때마다 카운트 변수를 업데이트하고 다시 그려내는 작업을 해야했다.
<!DOCTYPE html> <html lang="en"> <!-- 1. html 로 텍스트와 버튼을 생성 --> <body> <span>Total clicks : 0</span> <button id="btn">Click me</button> </body> <script> // 2. 자바스크립트로 문서에서 요소 찾기 const button = document.getElementById('btn'); const span = document.querySelector('span'); let counter = 0; // 3. 버튼 요소에 이벤트 걸어두기 button.addEventListener('mouseenter', function () { // 4. 이벤트 감지 counter = counter + 1 span.innerText = `Total clicks : ${counter}`; }); </script> </html>여기서 생각해볼 수 있는 단점으로는 첫번째로 코드가 HTML 태그, JS 코드으로 따로 나누어져 있어 가독성이 최악이다.
<button id="btn">Click me</button> const button = document.getElementById('btn');두번째로는 이벤트를 걸어줄때에 반드시 태그에 id 나 class 를 붙여서 요소를 찾아야하고 나중에 실제로 개발할때에는 이름 붙여주고 그 이름을 기억한 후 다시 이벤트를 거는 작업이 굉장히 귀찮다.
세번째는 다시 렌더링하는 작업이 비효율적이라는것이다. 지금은 innerHTML 만 다시 렌더링하는것이지만 바닐라 js 에서는 크게는 요소 하나 많게는 div 태그의 하위 모든 요소들을 바꾸는 경우가 많다.
리액트에서는 이러한 단점을 개선하고 상호작용할 수 있는 태그들을 지원한다.
'프론트 > React' 카테고리의 다른 글
React #6. useEffect 의 사용 목적과 방법 (0) 2024.08.13 React #5. 리액트 컴포넌트와 CSS 모듈화의 장점 (0) 2024.08.05 React #3. 컴포넌트의 prop 전달 (0) 2024.08.04 React #2. 리액트의 컴포넌트 이해하기 (0) 2024.08.03 React #1. 요소 생성과 렌더링 (0) 2024.07.31