[React]02 useState

useState

지난 시간에는 component에 대해서 알아보았다.
그런데 코딩을 하다보면 컴포넌트안에서 자유롭게 변경 할 값이 필요할 때가 있는데 이럴때 state를 사용할 수 있다.

• useState함수로 상태를 추가할 수 있다.
• 컴포넌트 안에서 만들 수 있다.

//const [상태명, 상태변경함수명] = React.useState(초기값);
const [counter, setCounter] = React.useState(1);
function plusCounter(){
  setCounter(counter +1);
  //혹은 setCounter(prev => prev +1)로 좀더 안전하게 코딩할 수 있다.
}
return <button onClick={plusCounter}> 카운터는 {counter} </button>

특히 폼에서 사용자입력값을 직접 다루기 위해 value를 상태로 관리할 수 있다.

const [value, setValue] = React.useState(init);
function onValueChange(e){
  setValue(e.target.value);
}
<form onSubmit= {handleSubmit)}>
  <input value = {value} onChange = {onValueChange}/>
  <button type="submit">제출</button>
</form>

추가적으로 input태그의 속성중 하나로 disabled는 입력창을 막아둔다.

disabled = {isDisabled} //true, false

로 동적으로 제어할 수도 있다.

TIL

리스트

웹플리케이션을 만들게 되면 리스트를 쓰는 상황이 많이 생기게 되는데 이때 비열에서 map을 돌면서 리액트UI를 반환하다.

아래 코드는 ul의 자식리스트를 만드는 코드이다.

const files = [url1, urll2, url3];

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