[React] useState를 이용하여 초 간단 todoList 만들기

import { useState, useEffect } from 'react'

function App() {
    const [toDo, setToDo] = useState('')
    const [toDos, setToDos] = useState([]);
  
}
export default App

값이 변경될 때마다 컴포넌트를 리후레시 위해 State를 사용한다!
todo(할일)와 todos(할일 목록)를 배열로 생성!

import { useState } from 'react'

function App() {
    const [toDo, setToDo] = useState('')
    const [toDos, setToDos] = useState([]);
  
  return (
        <div>
    	// todos 목록의 길이 
          <h1>My To dos ({toDos.length})</h1>
			
            <form onSubmit={onSubmit}>
                <input
                    onChange={onChange}
                    value={toDo}
                    type="text"
                    placeholder="Write your to do.."
                ></input>
                <button>Add To Do</button>
            </form>
            <hr/>
            // toDos 배열에 map 을 이용하여 item 별로 새로운 값을 넣어준다.
            {toDos.map((item, index) => {
              return <h1 key={index}>{item}</h1>
            })}
        </div>
    )
}
export default App

JSX으로 html 구문 작성

import { useState, useEffect } from 'react'

function App() {

    const [toDo, setToDo] = useState('')
    const [toDos, setToDos] = useState([]);
  
  	// input.value의 변경이 감지되면 setTodo 를 이용해 현재 Todo 의 값을 input.value로 바꾸어 준다.
    const onChange = (event) => setToDo(event.target.value)
    // enter 혹은 Add to do 버튼 시 폼에서 onSubmit이 실행
    const onSubmit = (event) => {
        event.preventDefault()
        console.log(toDo)
      	// todo 가 빈 문자열 일 시 아무 행동 없이 빠져나옴
        if (toDo === '') {
            return
        }
      	// 빈 문자열이 아닐 경우 빈 문자열로 돌려줌
      	// (?) ToDo 값을 지금 바꾸는 부분 이해 불가
        setToDo('');
      	// console.log 확인 결과 setTodo로 값이 즉시 변경되는 것이 아니였고 setState의 작동방식에 대한 공부가 필요하다.
      	// 현재 Todos 배열에 Todo 를 추가
        setToDos((currentArr) => [toDo, ...currentArr]);
    }

    console.log(toDos)
    console.log(toDo)

    return (
        <div>
          <h1>My To dos ({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input
                    onChange={onChange}
                    value={toDo}
                    type="text"
                    placeholder="Write your to do.."
                ></input>
                <button>Add To Do</button>
            </form>
            <hr/>
            {toDos.map((item, index) => {
              return <h1 key={index}>{item}</h1>
            })}
        </div>
    )
}

export default App

마치며

react 모듈 코드를 보면 State 의 값은 전역변수 _value 를 통해서 값을 변경시킨다. setState 는 const 로 선언된 State 를 변경시키는 게 아니라 다음 useState가 반환할 _value 의 값을 변경시키고 리렌더링 시키는 역할을 하고 useState 가 그 값(_value)을 가져오는 것이다 !
한마디로 ! setState 는 비 동 기 이다 !
이해완료! 뿌듯