React
src 폴더의 App.jsx에 작성되는 내용이 웹사이트에 보일 내용이다. 리액트는 새로고침하지 않아도, 수정사항을 자동으로 업데이트하여 웹사이트로 보여준다. 리액트의 아주 큰 장점이라고 할 수 있다. 리액트는 SPA(single page application)로, 웹페이지, 즉 html 파일이 하나밖에 없다. 하나의 웹페이지에 내용만 바꿔주기 때문에 새로고침할 필요가 없다는 것이다. 리액트 전체 파일에 html 파일은 단 하나다.
main.jsx는 index.html 파일과 App.jsx를 연결해주는 역할을 한다. 즉, html과 자바스크립트를 이어주는 것이다.
App.jsx에서 원하는 작업을 해주면 된다. css를 적용하는 방법은 같다. 다만 class가 아닌 className으로 클래스 이름을 적어주어야 한다.
<div className='box'>
Box1
Jessica
</div>
App.css에는 아래와 같이 적어준다.
.box{
border: 1px solid red;
width: 100px;
height: 100px;
}참고로 width는 가로, height는 세로다. 이렇게 작성해주면 아래와 같이 나온다.
우리가 똑같은 Box를 여러 개 만들고 싶을 때는 어떻게 할까? 코드를 복붙 여러 번 해야 할까? 리액트에서는 같은 내용의 코드를 여러 번 하지 않게 할 수 있다. 같은 디렉토리 내에 Box.jsx라는 파일을 만든다.
import React from 'react'
function Box(){
return (
<div className='box'>
Box1
Jessica
</div>
)
}
export default Box위의 코드를 먼저 작성해주는데, 이를 import 함으로써, 이 파일이 리액트 파일이 된다. function의 이름을 Box로 정해주고, Box가 무엇을 return할 지를 적어준다. 그리고 export default Box를 통해 Box라는 컴포넌트를 수출할 수 있다.
수출(export)했으니, App.jsx에서 수입(import)해와야 한다.
import './App.css'
import Box from './Box'
export default function App() {
return (
<main>
<Box/>
</main>
)
}그러면, 위의 캡쳐 화면과 같은 결과가 나오게 된다.
<Box/>
<Box/>
<Box/>이렇게 하면 같은 박스가 여러 개 생기게 된다.
그런데, 각각의 박스에 다른 이름을 넣고 싶을 땐?
<Box name="카리나"/>
<Box name="윈터"/>
<Box name="지젤"/>
<Box name="닝닝"/>우선 App.jsx에 이렇게 수정해준다.
그런 다음, Box.jsx를 아래와 같이 수정해준다.
import React from 'react'
function Box(props){
return (
<div className='box'>
Box1
{props.name}
</div>
)
}
export default Box매개변수 안의 props는 다른 이름으로 사용해도 된다. 이렇게 하면 아래와 같이 각각 다른 이름의 박스가 만들어진 것을 확인할 수 있다.
각각의 컴포넌트에 다이나믹한 값을 주고 싶을 때, 1. props 이름을 하나 정한다.(예: name) 2. 각각의 컴포넌트에 주고 싶은 값을 준다.(예: 카리나, 윈터, 지젤, 닝닝) 3. props는 객체(object) 타입이다.(예: props = {name:"카리나"}) 따라서 props.name으로 불러올 수 있다.
Box 번호도 다 다르게 하고, 모든 박스에 '클릭!' 이라는 버튼을 만들어보자.
import React from 'react'
function Box(props){
return (
<div className='box'>
Box{props.num}
{props.name}
<button>클릭!</button>
</div>
)
}
export default BoxBox.jsx를 위와 같이 수정해준다.
import './App.css'
import Box from './Box'
export default function App() {
return (
<main>
<Box name="카리나" num="1"/>
<Box name="윈터" num="2"/>
<Box name="지젤" num="3"/>
<Box name="닝닝" num="4"/>
</main>
)
}App.jsx에서 num="원하는 값"만 지정해주면 아래와같이 결과가 나온다.
이제 버튼을 클릭했을 때, 메시지가 뜨게 해보자.
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<button> 태그에 onClick을 써준다. 이는 onClick 이벤트를 줄거라는 뜻이다. {clickMe}로 함수 이름을 만들어주었다.
그리고 Box 컴포넌트 안에 const로 함수를 만들어준다. 이는 ES6 문법을 사용한 것이다. function과 똑같은 것이라고 한다.
내용을 정리해보자.
HTML도 있는데, 자바스크립트도 있다. 이를 JSX 문법이라고 한다. HTML 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만들고, 이 세트를 컴포넌트라고 하고, 리액트는 이 컴포넌트를 여려 개 만들어서 가져다 쓰기 때문에 코드의 재사용성을 높일 수 있다.