React-useState,list,form,localStorage

상태

컴포넌트 안에서 자유롭게 변경할 값이 필요할때

• useState함수로 상태를 추가할 수 있다.

• const [상태명, 상태변경함수명] = React.useState(초기값)

-컴포넌트 안에서 만들 수 있다.

ex) const [count, setCounter] = React.useState(1)

function 카운터증가() {

setCounter(counter + 1);

}

return 카운터는{counter}

---

리스트

배열로 반복되는 UI 그리기

• 웹사이트를 만들 때 정말 많이 쓴다

• 배열에서 map을 돌면서 리액트 UI를 반환한다.

ex) const favorites = ["이미지1", "이미지2", "이미지3"]

{favorites.map(image=><img src={image})}

---

폼

사용자 입력 다루기

사용자 입력값을 직접 다루기 위해 value를 상태(useState)로 관리한다

ex)

const [value, setValue] = React.useState('초기값');

function onValueChange(e) {

setValue(e.target.value);

}

제출

---

로컬스토리지 (리액트 문법아니고 브러우저 기능입니다)

브라우저에 데이터 저장하기

• 간단한 데이터 저장이 필요할 땐 localSrotage를 쓴다

(7일까지 저장가능하다)

ex_

localStorage.setItem('이름', '길동')

localStorage.getItem('이름') // 길동