[React 정리 #2]

출처: 인프런 기초 리액트 강좌 - 만들면서 배우는 리액트 : 기초

1. 상태

컴포넌트 안에서 값을 변경할 때 사용된다.
useState 함수를 통해서 상태를 추가할 수 있으며 2개의 값을 인자로 받는데,
첫번째 인자는 상태명이고 두번째 인자는 상태변경함수명이다.
그리고 useState(초기값)의 형태로 값을 초기화 할 수 있다.

const [counter, setCounter] = React.useState(1);

function addCount() {
  // 값을 직접 초기화하는 방법
  setCounter(counter + 1);
  // 함수형으로 이전 값을 핸들링 하는 방법
  // 함수형으로 사용하게 되면 컴포넌트를 최적화할 수 있다.
  setCounter(prev => prev + 1);
};

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

2.List

배열로 반복되는 형태를 map을 돌면서 리액트 UI를 반환할 때 자주 사용한다.

const favorites = ["img1", "img2", "img3"];

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

3.Form

사용자의 입력을 다루기 위해 value를 상태로 관리한다.

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

// 사용자가 타이핑을 할 때 마다 호출
function onValueChange(e) {
  setValue(e.target.value.toUpperCase());
}

<form onSubmit={handleSubmit}>
	<input value={value} onChange={onValueChange}/>
    <button type="submit">submit</button>
</form>