✅렌더링이란?
✅state를 쓰는 이유는?
✅hook의 기본 개념
✅useState란?- 렌더링
컴포넌트가 현재 props와 state의 상태에 기초하여 ui를 어떻게 구성할지 컴포넌트에게 요청하는 작업
- 렌더링이 발생하는 경우
-현재 리액트 내부에 어떤 상태(state)에 변경사항이 발생했을 때,
-컴포넌트 내부 state가 변경 되었을 때
-컴포넌트에 새로운 props가 들어올 때
-상위 부모 컴퍼넌트에서 위 두 이유로 발생했을 때
- state를 쓰는 이유
왜 변수 let이나 const로 서언하는 게 아니라 state를 쓸까
-->ui를 바꾸기 위해서 즉 렌더링을 다시하기 위해서(=즉 변경되어야하는 값은 반드시 state를 써야한다)
- useState란
-리액트의 훅(기능)중 하나다.
-useState는 state의 초기값을 정할 수 있고, return값으로 state,와 setState를 돌려주는 훅이다( 두 가지를 배열의 형태로 리턴 )
예제1
const [state, setState] = useState(초기값)useState의 두 가지 기능에 대해 알아보자
🔔🔔1. onclick -1(추가기능)
//onclick을 이용한 추가 기능
const [todo, setTodo] = useState([
{ id: 1, title: '나는', content: '헤헤' },
{ id: 2, title: '바보', content: '나는' },
{ id: 3, title: '헤헤', content: '바보' },
])
const addhandler = () => {
setTodo([...todo, { id: todo.length + 1, title: title, content: content }])
}
<button onclick = {addhandler}>추가</button>해석
setTodo는 todo의 상태를 컨트롤 할때(변경)할때 쓴다. 저 배열 안에 있는 것을 setTodo한다는 것은 ui에 그렇게 변경 상태를 보여주겠다는 것.
추가기능은
-->[...todo, { id: todo.length + 1, title: title, content: content }는 spread문법을 써서 todo의 배열을 얕은 복사로 복사한 후 새로운 배열을 추가해주는 방식을 썼다,
🔔🔔2. onclick -2(삭제기능)
//onclick을 이용한 삭제 기능
const [todo, setTodo] = useState([
{ id: 1, title: '나는', content: '헤헤' },
{ id: 2, title: '바보', content: '나는' },
{ id: 3, title: '헤헤', content: '바보' },
])
const deleteHandler = (id) => {
setTodo(todo.filter((item) => item.id !== id))
}
<button onclick = {deleteHandler}>삭제</button>해석
삭제기능은
-->filter함수를 써서 원래의 id값과 내가 선정한 id값이 같지 않으면 그것을 걸러내 setTodo로 삭제하는 방법으로 썼다,
🔔🔔2. onchange
const [title, setTitle] = useState('');
const handleTitleChange = (event) => {setTitle(event.target.value}
input value={title} onChange={handleTitleChange}/>해석:
onchange을 쓸 때는 value와 onchange와 쌍으로 같이 써줘야한다.
value ={}는 인풋 박스 안에 들어갈 state값이고
onchange에는 항상 event라는 매개변수가 딸려오는데 그것을 콘솔 찍어보면 우리가 input에 타이핑 한 값들이 event->event.tartet.value에 들어온다. 그래서 그 값을 setTitle에 담아서 retun시켜줬다.
"열정"