JSX(JS + XML)
자바스크립트와 HTML을 함께 쓸 수 있는 문법으로, html 태그 안에서는 {} 중괄호를 사용해서 JS를 사용할 수 있다.
const count = 1;
const title = <h1>{count}번째 고양이</h1>title 변수 안의 h1 태그는 리액트 엘리먼트라고 부른다.
Babel
브라우저는 JSX를 이해하지 못하기 때문에, 컴파일 과정이 필요한데 Babel이 이 역할을 해준다.
JSX문법을 javascript 문법으로 변환해준다.
컴포넌트
재사용 가능한 UI 코드 조각으로, 리액트에서 컴포넌트는 빼놓을수 없는 중요한 개념이다. 독립된 컴포넌트들을 조합하여 브라우저에 렌더링시켜 재사용이 용이하게 개발한다.
리액트 스타일링
별도의 css 파일을 연동시켜 사용할 경우, 기존 html에서 class를 설정해 줬던 것과는 다르게 리액트에서는 className 을 사용해야 한다. (class를 사용할 경우 javascript의 class로 인식한다)
<div className = "danger"> 위험 </div>만약 인라인 스타일링을 사용할 경우 중괄호 안에 중괄호를 한번 더 사용해 주어야 하고, 주의할 점은 속성값을 입력할 때 "" 를 꼭 붙여주어야 한다.
<div style = {{color: 'blue'}} 위험 </div>이벤트(클릭, 스크롤 등)
리액트에서는 일반 자바스크립트 이벤트 목록과 사용법은 동일하나, 중간을 대문자로 써야한다.
- onclick => onClick
- onsubmit => onSubmit
function handleClick(event) {
console.log("클릭")
}
<button onClick={handleClick}> 제출 </button>상태
컴포넌트 안에서 동적인 데이터를 다룰 때(변하는 값이 필요할 때) 사용한다.
- useState 함수로 상태 추가가 가능하다
- 컴포넌트 안에서 만들 수 있다
- 초기값은 괄호 안에 넣어주며, 모든 JS 표현식 사용이 가능하다.
useState(초기값)
const [counter, setCounter] = React.useState(1)
function plusCounter() {
setCounter(counter + 1)
}
// setCounter(prev => prev + 1) 이런식으로도 사용이 가능하다.
return <button onClick={plusCounter}> 카운터는 {counter} </button>리스트
웹사이트를 만들때 정말 많이 쓰이는 UI로, 리액트에서는 배열에서 map을 돌며 리액트 UI를 반환한다.
const favorites = ["img1", "img2", "img3"]
<ul>
{favorites.map(
image => <img.src={image} />
)}
</ul>form
리액트에서는 사용자 입력값을 직접 다루기 위해, value를 상태로 관리한다.
const [value, setValue] = React.useState('')
function onValueChange(e) {
setValue(e.target.value)
}
<form onSubmit = {handleSubmit}>
<input value={value} onChange={onValueChange} />
<button type="submit"> 제출 </button>
</form>로컬스토리지
로컬스토리지는 브라우저에 데이터를 저장하는 브라우저의 기능으로, 간단한 데이터 저장이 필요할 때 사용한다.
webkit 관련 브라우저에서는 7일까지 저장 가능하다는 특징이 있다.
localStorage.setItem('이름', 'jangjiwoo')
localStorage.getItem('이름') // j'jangjiwoo'