[TIL] useState

컴포넌트에서 동적인 값을 상태(state)라고 부른다.

리액트에는 useState라는 함수가 있는데 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다.

 

 

useState를 사용하기 위해 App.js 최상단에 import 해준다..
import { useState } from 'react';

 

 

useState 변수 선언 방법
const [state, setState] = useState(초기값);

 

 

 

input에 무언가 입력하고 코드를 실행하려면 onChange 아니면 onInput 이벤트 핸들러를 부착하면 된다.

 

 

 

여기서 onChange는 input창에 무언가를 입력할때마다 안에있는 코드를 실행한다.

const InputArea = () => {
	// toDos를 변환시켜주는 setToDos
    const [toDos, setToDos] = useState("");
    
    const onChange = (e) => {
    	setToDos(e.target.value);
        console.log(toDos);
        //콘솔에 change되는 value값들이 찍힌다.
   }
    
    return (
    <div>
        <form> 
            <input type="text" value={toDos} />
            <button>등록하기</button>
        </form>
    );

 

 

 

 

우리는 이 input에서 change 된 value값을 제출을 해줘야하고, 그 제출된 값을 html에 그려야한다.

해당 폼을 제출해야하니 form 자체에 onSubmit 핸들러를 추가해보자!

 

	const onSubmitHandler = (e) => {
    	// form 속성 새로고침 방지
    	e.preventDefault();
        
        // input창 공백 방지
        if(toDo === ""){
        	return;
        }
        
        console.log(toDo);
        //input창 초기화
        setToDos("")
   }


return(
	<div>
    	<form onSubmit={onSubmitHandler}>
        	<input onChange={onChange} value={toDo}>
            <button>ADD</button>
        </form>
    </div>
)

 

 

 

 

이제 여러개의 toDo들을 한 배열로 만들어서, 화면으로 뿌려줘야 한다. 

toDos를 직접적으로 건드려서 State를 수정하는 방식이 아닌, 함수를 통해 State를 구하는 방식을 사용해보자.

 

 

toDos가 그려지는 setToDos에 새로운 배열을 return 하게끔 해보자.

기존에 있던 배열을 펼쳐서 (spread) 새로운 배열로 생성해서 넣어주자.

 

 

const onSubmit = (e) => {
	e.preventDefault();
    if(toDos === ""){
    	return;
    }
    setToDos((prevToDos) => [toDos, ...prevToDos])
    // 텍스트창 초기화
    setToDos("")
  }

 

이렇게하면 값을 입력할때마다 toDos 배열의 요소들로 들어가고, 우리는 이 요소들을 컴포넌트화 시킬 것이다.

그 때 쓰는 것이 바로 "map" 메서드이다.

map을 쓰면 요소 한 개, 한 개 돌아가면서 컴포넌트화를 시켜준다.

map 은 첫번째로 item을 넣어주고, 두번째로 index를 넣어주면 된다.

또한 같은 component의 list를 렌더링해주려면 key라는 props를 넣어줘야한다. 

 

 

//... 위 코드 생략
//...
// 여기선 item 대신 todo를 썼다.
	<ul>
    	{toDos.map((todo, index) => <li key={index}>{todo}</li>)}
    </ul>
</div>

 

 

이렇게하면 화면에 렌더링이 된다!