💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.
React 왜 쓰는걸까?
취업시장만 봐도 react는 거의 기본 스텍이 되어야 할 정도로 많은 기업들이 react를 사용하고 있다. 도대체 왜일까? 어떤 장점이 있기에 meta, nexflix, instagram, twitter, air bnb등이 선택한 것일까? 답은 컴포넌트 단위로 개발할 수 있기 때문이다. 쉽게 말하자면 html 재사용성을 높여 개발할 수 있다. React에서 컴포넌트는 여러 파일에서 사용할 수 있기 때문에 생산성과 유지보수를 용이하게 한다.
component
여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위
Vanilla로 작성하기
<body>
<span>add number start : 0</span>
<button id="btn">clickme</button>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `add number start : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</body>
일반적으로는 html을 작성하고, 스크립트를 작성하고, 이벤트를 호출하고 결과를 확인하는 방식을 사용한다. 그러나 react는 정확히 그 반대로 작동한다.
리액트로 작성하기
리액트를 사용하기 위해서는 일단 리액트와 리액트 돔이 필요하다.
라이브러리를 import하고 console에 React를 쳐보면 react가 설치된 것을 확인할 수 있다.
react 와 react-dom의 차이
react는 어플리케이션이 interactive(양방향, 상호작용)하게 도와주는 library, react-dom은 react로 만든 element들을 html body에 둘 수 있도록 도와주는 library 혹은 package이다.
베이직
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{ id: "sexy-span", style: { color: "red" } },
"hello, i am a span"
);
// 리엑트로 엘리먼트를 생성하는 방법, 알규먼트, 프로퍼티(아이디,클래스,이벤트 등등), content
ReactDOM.render(span, root);
// render : 사용자에게 보여주겠다는 명령어
// span을 root에 위치하게 한다.
</script>
단 한줄의 html과 script로만 이루어진 코드.
핵심은 javaScript로 시작해서 html로 끝난다는 점이 vanilla와 다른 부분이다.
javaScript를 이용해서 element를 생성하고 ReactJS가 html로 번역하며 element를 업데이트까지 할 수 있다.
element 두개를 root에 놓고싶다면?
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("h3", null, "hello, i am a span");
const btn = React.createElement("button", null, "click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>React.createElement의 content의 위치에 array를 만들고 그 안에 넣어주면 된다.
const container = React.createElement("div", null, [span, btn]);
// [span, btn]의 위치가 React.creatElement의 content 위치이다.
// 프로퍼티가 빈값일 때는 null을 사용한다.
※vscode에 실제로 작성하지 않은 엘리먼트들이 개발자모드에서는 보여진다.
vanilla의 코드를 react로!
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("i am mouse enter"),
},
"hello, i am a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("i am clicked"),
},
"click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>코드가 엄청 간결해졌다.
html의 엘리먼트를 스크립트에서 새로 불러올 필요도 없고, addEventListener를 작성할 필요도 없다!
JSX
jsx
JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어있으며, JavaScript 파일 내에 HTML과 같은 마크업을 작성하여 렌더링 논리와 콘텐츠를 동일한 위치에 유지할 수 있다.
jsx문법을 사용하려면 babel이 필요하다.
👉🏻babel install
바벨Babel
ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 하는 일종의 컴파일러이다.
//문법
const element = <h1>Hello, world!</h1>;jsx문법을 사용하여 최상단 vanilla와 동일한 동작의 코드를 작성한다면 아래와 같다.
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("i am mouse enter")}>
Hello, i am title
</h3>
);
const btn = (
<button onClick={() => console.log("i am clicked")}>Click me</button>
);
const container = React.createElement("div", null, [Title, btn]);
ReactDOM.render(container, root);
</script>훨씬 더 친숙하고 직관적이며 간결한 코드로 작성된다. (ssap편리!)
이것을 조금 더 응용해보자.
const Title = (
<h3 id="title" onMouseEnter={() => console.log("i am mouse enter")}>
Hello, i am title
</h3>
);
const btn = (
<button onClick={() => console.log("i am clicked")}>Click me</button>
);
const container = React.createElement("div", null, [Title, btn]);이 코드를 조금 더 직관적이게 변경해본다.
각 변수의 첫 글자는 대문자로 바꾸고 함수로 변경한다.
const root = document.getElementById("root");
const Title = () => {
// arrow function으로 변경해주었고, 필수값인 return을 추가해주었다.
return (
//return 안에 jsx코드를 작성한다.
<h3 id="title" onMouseEnter={() => console.log("i am mouse enter")}>
Hello, i am title
</h3>
);
};
const Btn = () => {
return (
<button onClick={() => console.log("i am clicked")}>Click me</button>
);
};
const container = <div><Title/> <Btn/></div>;
//Title, Btn은 컴포넌트화 되어 container안에 들어갈 수 있다.위 코드를 javacript로 보게 된다면 아래처럼 반복적으로 creatElement을 해야만 한다.
