React는 2011년에 페이스북이 만든 라이브러리이다.
자바스크립트를 그대로 사용하지만 기존 프론트 작업과 매우 달랐다.
1. 자동으로 UI를 업데이트한다.
➡️ 바뀐 내용을 바로 바로 바꿔준다.
2. 재활용이 높다.
➡️ 코드를 덜 쓴다.
3. 코드가 정리된다.
➡️ HTML, Javascript 파일을 따로 두는 것이 아닌 한 곳에서 작성한다.
간단하지만 실제 코드를 작성해보자!
처음 리액트를 실행하면 폴더 구조는 이러하다.
App.jsx를 중심으로 index.html 파일이 하나 있다.
실행하는 코드를 작성할 때는 App.jsx에 중점적으로 코드를 작성한다.
// src/App.jsx
import React from 'react';
import './App.css';
function App() {
return (
<main>
box1
Erin
</main>
)
}
export default App;
HTML 코드로 작성된 <main> 태그는 웹사이트에 보여질 내용이다.
리액트는 HTML 파일이 하나밖에 존재하지 않는다. (index.html)
싱글 페이지 어플리케이션의 개념으로 웹 페이지가 하나 밖에 없다.
싱글 페이지 어플리케이션은 새로운 페이지를 불러오지 않고 하나의 웹 페이지의 내용만 바꿔주는 것이다.
유저는 여러 개의 페이지를 사용하는 것처럼 느껴지는 것이다.
즉, 페이지는 하나이기 때문에 HTML 파일은 단 한 개인 것이다!
위 사진의 리액트 폴더 구조를 보면 'index.jsx'가 있는데, 이 친구는 index.html 파일과 App.jsx를 연결해주는 역할을 한다.
위 index.html 코드에서
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
...
이러한 코드가 있는데 id값을 root로 작성하였다.
index.jsx에서도 코드를 보면 root를 getElementById로 선택하고 있다.
<App /> 태그를 작성하여 <App />을 그려준다는 것을 명시하고 있다.
여기서 <App /> 는 App.jsx 를 가르키고 있다.
박스를 만들어보자!
App.jsx로 돌아와서 박스를 만들어보자.
// App.jsx
function App() {
return (
<main>
<div className="box">
box1
Erin
</div>
</main>
)
}
export default App;
박스를 만들어주기 위해 div 태그에 class가 아닌 className을 작성한다.
클래스를 적용시키기 위해 css파일에 box라는 이름의 클래스를 작성한다.
.box{
border: 1px solid red;
width: 100px;
height: 100px;
}
짠! 이러한 결과물이 나온다!
그렇다면 여러 개의 박스를 만들고 싶다면 여러 개의 div 태그를 나열하여 작성하면 될까?
리액트의 장점인 코드 정리와 재활용을 사용해보자.
반복되는 코드를 하나의 jsx 파일을 만들어 재사용해보자!
Box.jsx를 생성하고 원래 적어주었던 코드를 복사해준다.
// Box.jsx
import React from 'react';
function Box(){
return (
<div className="box">
box1
Erin
</div>
)
}
export default Box
Box를 내보내기 위해 export default Box도 작성해주어야 한다!
// App.jsx
import React from 'react';
import './App.css';
import Box from "./Box";
function App() {
return (
<main>
<Box />
<Box />
<Box />
<Box />
</main>
)
}
export default App;
그래야 이렇게 App.jsx에서 import하여 사용할 수 있기 때문이다.
import한 Box는 Box태그를 통해 초기 코드와 똑!같!이! 사용 가능하다.
이것이 컴포넌트의 개념인 것이다.
이제 박스마다 다른 이름을 넣어보자.
// App.jsx
import React from 'react';
import './App.css';
import Box from "./Box";
function App() {
return (
<main>
<Box name="예린" num="1"/>
<Box name="띠용" num="2"/>
<Box name="키키" num="3"/>
<Box name="히히" num="4"/>
</main>
)
}
export default App;
Box 태그 안에 name과 num을 붙여 값을 넣어준다.
// Box.jsx
import React from 'react';
function Box(props){
return (
<div className="box">
box{props.num}
{props.name}
</div>
)
}
export default Box
function Box()에 props를 넣어주고 Box태그 안에 작성한 name과 num을 {} 안에 작성해준다.
그럼 이러한 결과물이 나온다!
바로 이것이 props 개념이라고 한다.
각 컴포넌트에 상이한 값을 주고 싶을 때 props의 이름을 정하고(name, num) 값을 넣어준다. (name="키키")
props는 객체 타입이다.
그리하여 {props.num}로 값을 불러오는 것이다.
Box 컴포넌트 안에 버튼도 넣어보자.
// Box.jsx
import React from 'react';
function Box(props){
const clickMe = ()=> {
alert("리액트 만세")
}
return (
<div className="box">
box{props.num}
{props.name}
<button onClick={clickMe}>클릭!</button>
</div>
)
}
export default Box
버튼과 버튼을 누르면 알림창이 뜰 수 있도록 이벤트도 추가해주었다.
clickMe 함수를 만들고 button 태그에 onClick을 통해 연결시켜주었다.
HTML은 버튼을 하나씩 추가해야 하지만 리액트는 그럴 필요 없이 따로 작성한 컴포넌트 jsx 파일에 추가해주면 된다.
HTML과 자바스크립트를 한 곳에서 사용하고 컴포넌트에 대한 이해를 확실히 할 수 있었던 짧은 실습이었다!!
출처: https://www.youtube.com/watch?v=qcphnSqneE0 코딩알려주는누나 유튜브