리액트는?
SPA
html 파일은 하나이고, 유저의 상호작용에 따라서 내부 요소에 변화를 일으켜 변경되는 부분만 바꿔준다. 새롭게 렌더하지 않기 때문에 속도가 빨라진다. 단점은 교체를 시킬 요소도 미리 로딩을 해야하기 때문에 첫 로딩은 느린 편이다. 하지만 페이지가 많을 수록 SPA의 장점이 더 부각된다.
Virtual Dom
리액트가 가상으로 돔을 생성한다. 실제 돔과 비교를 하면서 달라진 부분을 찾아 다시 렌더를 해준다. 그래서 전체를 다시 렌더하지 않고 효율적인 렌더를 진행한다.
component
파트를 나눠서 파트 별로 작업이 가능하다. 팀원간의 작업 파일에 충돌을 줄일 수 있다. 파일 한곳에 몰아서 코드를 작성하지 않기 때문에 가독성이 늘어난다. 리액트에서는 함수형으로 작성하는 것을 권장한다.
JSX
리액트에서 쓰이는 자바스크립트 확장 문법이다. html을 자바스크립트 기반으로 작성할 수 있다.
- 루트 함수 return에 전체를 감싸는 부모 태그가 하나 있어야한다.
- 외부 자바스크립트에서 선언한 변수나 함수를 쓸때는
{변수}중괄호를 서야한다.- vue로 얘기하자면 {{변수}}랑 비슷한거 같다.
- html 태그 요소에 class를 줄때는
className="클래스이름"으로 써야한다. - 주석은 {} 중괄호로 감싸야한다.
camelCase
리액트에서는 무조건 카멜케이스로 작성해야한다.
리액트 컴포넌트명은 대문자로 시작해야한다.
시작하기
mac
-
brew install node
-
brew install yarn
yarn은 페이스북에서 만들었는데 그 당시에는 npm이 불안정했기 때문에 yarn을 만들었다고 한다. 현재는 npm의 최적화 성능이 어느정도 올라와서 큰차이는 없다고는 하지만 리액트를 쓴다면 yarn을 사용하는 것은 암묵적인 국룰로 인식하고 사용되고 있다고한다.
-
yarn create react-app (앱이름)
-
yarn start 데브 서버 명령어
파일 작성
html -> index.js -> app.js로 타고들어가서 app.js를 렌더한다.
src에 components 폴더를 만들어준다.
// component 파일
// "리액트를 위해 작성된 js문서다."라는 표시
import React from 'react'
function First() {
return (
// html 요소
<div>First</div>
)
}
// First라는 이름으로 이 파일을 부를 수 있다.
export default First하위 컴포넌트에게 전달, props
// app.js
import First from './components/First'
function App() {
return (
<div>
<First name="oim" />
</div>
);
}
export default App;
// component 파일
import React from 'react'
function First({name}) {
return (
<div>{name} First</div>
)
}
export default Firstname="oim"은 프롭을 보내면 컴포넌트에서 매개변수 props로 받을 수 있지만 변수를 부를 때 props.name으로 불러줘야하기 때문에 번거로워 권장하지 않는다. 보내줄 데이터는 props 구조분해를 해서 하나씩 보내는걸 권장하고 매개변수로 계속 추가해주면 된다.
props가 너무 많을 경우 props를 매개변수 넣어주고 const {} = props로 구조분해를 해줘서 사용한다.
props의 기본값
(현재 컴포넌트이름).defaultProps = { name: '기본값' }
변하는 값, useState
리액트는 값이 변하는 것만으로는 화면에서 값이 변하지 않는다. 값이 변했으니까 다시 렌더해줘라고 따로 말해줘야지 렌더를 다시한다. 즉, 값이 변경되면서 리액트에게 다시 표기를 해줘 명령을 해야한다.
let [a, b] = [1, 2] 이 문법은 destructuring 자바스크립트 구조이다.
let [a, b] = useState() useState자리에는 배열 데이터가 남아서 a는 useState에 담은 데이터의 변수명이고 b는 데이터를 변경처리할 수 있는 함수이다.
// useState가 필요하다.
import React, { useState } from "react"
// const [변수명, set변수명] = useState(변수의 초기값)
// test 초기값 0으로 변수 선언됨
const [test, setTest] = useState(0)
const countUp = () => {
// countUp 버튼을 누르면 test 계산식이 작동
setTest(test + 1)
}
<button onClick={countUp}>카운트업!</button>useState()와setTest()를 통해서 값이 변경되어도 렌더가 되지 않는 것을 해결할 수 있다. 그래서 단순히 let변수 선언만 쓰는 경우는 드물다. 사용자에게 변하는 값을 보여준다면 useState를 써준다.
버튼에서 실행되는 함수에 인자를 전달하고 싶을땐 화살표 함수로 전달 가능하다.
<button onClick={() => countUp(인자)}>카운트업!</button>
useState 변경함수 특징
기존 state 값 == setUseState(변경할 값)true이면 변경해주지 않는다. 에너지 절약을 위해.- Array, Object 경우 변수에는 메모리 주소가 담겨있어서 같은 변수에 값을 재할당 한다면 동일한 메모리주소를 비교해보고 변경하지 않게 된다.
컴포넌트의 장점
import First from './components/First'
import Intro from './components/Intro'
import Clock from './components/Clock'
function App() {
return (
<div>
<First />
<Intro name="Jay" age="99" email="fastdev@naver.com" about="i dont know, you dont know" />
<Clock where="Asia/Seoul" />
<Clock where="US/Pacific" />
</div>
);
}
export default App;Clock 컴포넌트에 다른 props를 보내서 같은 틀에서 다른 내용을 출력한다. 이렇게 틀을 재사용할 수 있다는 점이 장점이다.
배열 메서드 사용해서 요소 출력
// component 파일
import React from 'react'
function First({name}) {
const res = ["one", "two]
return (
<>
{res.map(item => {
// jsx 쓸거야라고 말해주는 return()
return (
<>
<h2>{item}</h2>
</>
)
})}
</>
)
}
export default First