사이드 프로젝트 진행을 위해 React를 배워보기로 했다.
사실 둘 중 하나를 고르라면 프론트엔드보다 백엔드를 하고 싶지만, 결국은 웹이 어떻게 굴러가는지 알아야 하기에
니꼬쌤과 함께하는 <ReactJS로 영화 웹 서비스 만들기> on..
Why React?
1. 전세계 상위 1만 개의 웹사이트들 중 44.76%가 React를 사용한다.
ex. 에어비앤비, 인스타그램, 페이스북, 넷플릭스 등등
대세인 이유는,
- 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스 가능
- 모듈형 개발이 가능하여 생산성도 높음
- 라이브러리 라는 특성상 다른 프레임워크에 간편하게 붙여서 사용 가능 등등..
당장 페이스북에 접속해서 이런저런 요청을 수행해도 새로고침 없이 빠르게 수행되는 것을 볼 수 있고, 이러한 사용자 경험은 예를 들어 쇼핑몰의 경우 수익 증가에까지 영향을 미친다고 한다.
2. 페이스북이 React를 만들었다. (메타가 입에 안 붙는다..)
아직도 React를 사용하고 있고, 더 좋은 방향으로 개선하기 위해 투자하고 있다.
3. Javascript와 비슷하며, 아주 큰 커뮤니티를 가지고 있다.
기술에 대한 생태계가 있다는 것은 아주 중요하다. React Native는 iOS나 안드로이드 어플을 React JS 코드로 만들 수 있게 해주며, React를 기반으로 VR 경험을 제작하려는 사람들도 있다고 한다.
Understanding React
당장 React에 뛰어들고 싶지만, 그 전에 기술에 대해 이해하는 것이 중요하다.
React의 핵심은 바로, interactive UI이다. 애초에 그걸 위해 만들어진 라이브러리이기 때문.
React를 사용하지 않고 HTML과 Javascript만 사용해서 버튼의 클릭 수를 보여주는 간단한 웹을 만들어보자.
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>코드가 어떻게 동작하는가?
- HTML을 만들고 // span, button
- JavaScript에서 가져와서 // getElementById, querySelector
- event를 감지하고 // addEventListener
- counter라는 데이터를 수정하고 // handleClick
- HTML을 업데이트한다. // span.innerText
React를 사용한 코드를 확인해보자.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a h3"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>>>
코드가 어떻게 동작하는가?
- Javascript로 element를 만들고 // React.createElement
- element에서 event를 감지하도록 하고 // onMouseEnter, onClick 등
- React element들을 HTML body에 연결한다. // ReactDOM.render
React를 사용하지 않은 코드가 HTML로부터 시작했다면, React를 사용한 코드는 반대로 JS에서 시작해서 HTML에서 끝나는 것을 볼 수 있다. React.createElement를 통해 React가 element를 생성한다는 것은, 다시말해 React가 element를 업데이트 할 수 있고, 유저에게 보여지는 내용을 컨트롤 할 수 있다는 것이다.
사실 앞으로 createElement를 사용하는 일은 없을 것이다. 하지만 공부하는 과정이므로...
createElement의 첫번째 argument는 root에 들어갈 HTML 태그 / 두번째는 property / 세번째는 content이다.
onClick 혹은 style과 같은 property들이 element와 함께 있기에 React는 초강력해진다.
React 팀은 interactive한 어플리케이션에서 일어나는 작업들 중 많은 부분이 event를 감지하는 일이라는 것을 알고 있었을 것이고, HTML에서 element를 찾아서 addEventListener를 등록하는 대신에, element의 property에 event를 등록할 수 있게 했다.
'개발 > REACT' 카테고리의 다른 글
| Lombok이란 / cannot find symbol 에러 (0) | 2025.04.04 |
|---|---|
| React 테이블 커스텀하기 / MUI X DataGrid를 파헤쳐보자 (0) | 2025.03.23 |
| React 테이블을 만드는 방법 / react-bootstrap-table, material ui (1) | 2025.03.23 |
| ReactJS 입문 with 니꼬쌤 3 - SUPER CONVERTER 코드 (0) | 2022.03.22 |
| ReactJS 입문 with 니꼬쌤 2 - [JSX, STATE] (0) | 2022.03.21 |
