📝 ReactJS로 영화 웹 서비스 만들기 : From #1.2 to #2.6
Counter 기능 비교 구현을 통해 바닐라JS와 리액트JS 차이점을 공부합니다.
바닐라JS로 기능을 구현하면서 ReactJS로 개선할 수 있는 점들을 이해합니다.
🎯 목표 기능 (Counter)
plus, minus 버튼을 누를때마다 숫자가 +1씩 증가 / -1 감소하기⛳️ 바닐라JS로 counter를 만드는 여정 : 5단계
1) html마크업을 작성합니다.
2) JS에서 사용할 마크업 요소들의 변수를 선언합니다.
3) 변경될 data의 변수 선언 및 초기값을 작성합니다.
4) 데이터를 변경하고 변경된 데이터를 마크업에 다시 반영하여 렌더링시키는 함수를 작성합니다.
5) 이벤트리스너를 버튼 변수에 걸어 함수를 호출하게 합니다.//1. html요소에 대한 변수 선언
const plusBtn = document.getElementById("plusBtn");
const minusBtn = document.getElementById("minusBtn");
const numberValue = document.getElementById("number");
//2. data
let data = 0;
//4. event handler 등록
function handlePlusClick() {
data = data + 1;
numberValue.innerText = `Total Click : ${data}`; //html render
}
function handleMinusClick() {
data = data - 1;
numberValue.innerText = `Total Click : ${data}`; //html render
}
//5. 이벤트리스너를 이용한 event handler함수 호출
plusBtn.addEventListener("click", handlePlusClick);
minusBtn.addEventListener("click", handleMinusClick);⛳️ 바닐라JS 구현의 단점
1) HTML 마크업 작성, 2) HTML 요소의 변수 이름 정하기, 3) 이벤트 함수 정의 및 호출... 이 세가지 단계를 끊임없이 반복하며 작업하게됩니다.
퍼블리싱 작업을 할때도 항상 이부분이 불편하다고 생각했는데,
특히 HTML 요소에 변수명을 줘서 JS나 jQuery로 불러오게되면 코드가 굉장히 길어집니다.
(자바 어노테이션 선언부만큼 길어지는 변수선언....이게 맞나...🫣)
끊임없이 변수 네이밍을 해야하기 때문에, 사전에 개발자들과 네이밍 규칙을 정하지 않으면, 아주 지저분하고 읽기 힘든 코드가 되어버리기 십상입니다.🥲 (레거시 소스코드가 이미..)
👉 리액트JS가 더 효율적인 이유는, 변경된 부분을 인지한다는 점입니다.
vanillaJS는 변경된 데이터가 마크업에 반영되려면 처음부터 끝까지 UI를 다시 그리지만, 리액트는 변경된 부분만 인지하여, 해당 부분만을 업데이트합니다.
⛳️ React Element?
리액트가 만들어내는 가상 DOM 요소, 리액트는 HTML을 페이지에 직접 만들지 않습니다.
대신 script안에서 React.createElement을 이용하여 가상 DOM을 생성합니다.
ex) vanillaJS의 시작 지점 > HTML
reactJS의 시작 지점 > JavaScript ⛳️ ReactJS와 ReactDOM?
React element를 만들기위해 필요한 아이템 2가지
- ReactJS : interactive UI 엔진과 같은 Library, 변경사항 업데이트를 html에 보여주는 기능
- ReactDOM : React element를 html > body에 위치시키는 Library or Package⛳️ React.createElement(arg1, arg2, arg3);
1) arg1 : 사용할 html태그 종류
2) arg2 : id, class, style, event-listener... properties (props가 포함된 object)
3) arg3 : 내용 텍스트, html변수⛳️ ReactDOM.render(React element, root);
리액트가 색다르게 느껴졌던 가장 큰 이유는 "가상 DOM"의 존재였습니다.
무엇 하나가 바뀔때마다 refresh를 하고 처음부터 끝까지 다시 불러와야하는 과정이 사라지고..."변화가 있는 부분" 만 바꿔줍니다.
rootElement만 id로 불러오면, 그 아래 하위요소로 변화가 있는 DOM만을 클라이언트로 렌더시켜주면서 더 효율적인 방법을 사용하고 있습니다.
⛳️ 리액트JS와 바닐라JS의 차이점 (⭐️ 리액트의 핵심 ⭐️)
바닐라JS : html (시작) -> JS (끝)
리액트JS : JS (시작) -> html (끝)✅ 리액트JS는 사용자에게 보여지는 영역을 컨트롤할 수 있습니다.
✅ 리액트JS element는 JS에서 생성되며, 변경사항을 감지하고 해당 영역만을 업데이트합니다.
✅ 리액트JS는 결과물인 html을 업데이트할 수 있습니다.
🙅♀️ 기존 바닐라JS의 방식
html을 작성 > html 요소를 찾고, JS에서 가져오고 > 변경사항 업데이트🙋♀️ 리액트JS statement만으로 할 수 있는것
1) html 생성, 변경
2) html안의 내용물(content) 넣기
3) vanillaJS의 addEventListener 대신, React.createElement 2번째 인자 object에 event등록✅ html 마크업에 보여야하는 것과 (style,id,class..) on + event 가 eventListener인 것도 감지합니다, property간의 차이점을 알기때문에 마크업에 구분하여 노출합니다.
//html Root(실제 DOM 요소)
const root = document.getElementById("root");
//React Element(가상 DOM)
const plusBtn = React.createElement("button",
{
id: "plusBtn", //plusBtn의 id_property
onClick: () => console.log("clicked") //plusBtn의 event_property
},
"plus button");
const minusBtn = React.createElement("button", { id: "minusBtn" }, "minus button");
const number = React.createElement("h1", { id: "number" }, "Total Click : 0");
//Container
const container = React.createElement("div", null, [number, plusBtn, minusBtn]);
//Render
ReactDOM.render(container, root);⛳️ 리액트JS의 JSX
- JS를 확장한 문법입니다.
- 생긴 모양이 html과 흡사하여, JSX로 React Element를 만드는것이 개발자들에게 익숙 합니다.
- 브라우저는 JSX를 이해 할 수 없기때문에, Babel을 사용한 변환이 필요합니다.
- arrow function function with return을 이용하여 컴포넌트를 렌더링합니다.
- JSX의 변수는 항상 대문자로 시작합니다. (컴포넌트의 첫글자는 대문자, 소문자는 html태 그로 인식합니다.)
- JSX는 요소를 작게 나누어 관리할 수 있도록 합니다. (보기쉽게 코드 분리 후, 렌더링)🙋♀️ 오늘의 생각
리액트JS는 모든 작업이 개발자에게 좀 더 편리하도록 만들어진 것 같습니다. 여기저기 돌아다니며 여기 조금, 저기 조금 건드리기보다 작업구역을 좁혀서 한번에 작업을 집중해서 마무리할 수 있도록..! 🏃♂️
너무나 개발자 친화적으로 편리해진 탓에, 굳이 스타일 작업자(aka.웹퍼블리셔)와 데이터 작업자가 분리되어야 할 필요가 없어지고, 이 두가지 작업을 1명의 프론트 개발자가 진행할 수 있도록 바뀌어가고있습니다.
이런 상황에서 기존 퍼블리셔에게 주어지는 길은 2가지 정도라고 생각합니다. UI 디자이너로 빠지거나, 프론트 개발로 병합되는 방향입니다.퍼블리셔로 재직하면서 항상 느꼈던 아쉬움이 바로 데이터 작업에 대한 것이었는데요,
이번 리액트 스터디를 통해 평소에 익숙하게 하던 스타일 작업과 데이터 연동을 함께 진행해보는 좋은 기회가 될 것 같습니다.
남은 10주 화이팅...👀
📌 FE 공부 정리 공간입니다.