리액트 기본개념 총 정리 2편

상태

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

컴포넌트 안에서 만들수 있음

 

ex) 
const [data, setData] = useState(초기값)

function counter(){
  setData(data + 1);
}

return <button onClick={counter}>카운터 {counter}</button>

 

---

리스트

배열로 반복되는 UI그리기

배열에서 map으로 사용해서 반환

 

ex)
const abc = [“1”,”2”,”3”]

<ul> 
	{abc.map(data=><li>{data}</li>)}
</ul>

 

여기서 왜 for ,foreach등의 반복문은 안되고 map만 사용해야 하냐면

React에서 항목 목록을 렌더링할 때 각 요소에는 이를 식별하는 고유 키가 있어야 함

for 또는 foreach와 같은 루프 구성을 사용할 때 각 요소의 키를 추적하기 어려울 수 있는데 반면 map()을 사용하면 키를 함수의 두 번째 인수로 쉽게 지정할 수 있다고 하네요

 

---

폼 form

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

 

ex) const [value, setValue] = useState(“”)

function onValueChange(e){
  setValue(e.target.value)
}

<form donSubmit={handleSubmit}>
  <input value={value} onChange={onValueChange} />
  <button type=“submit”>제출</button>
</form>

끝 더 공부하면서 추가할게 많을시 3탄이 있겠지만 next도 해야하기 때문에 일단 천천히 보면서하는걸로~