[React] useState

UseState를 사용하는 이유?
UI를 바꾸기 위해서다!

🌱 블로그 내용 중 이유에 대해 잘 정리된 글이 있어서 가져왔다.
https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53#%EC%9D%B4%EC%9C%A0

useState는 아래와 같은 모양들로 필요에 따라 원하는 방식대로 사용할 수 있다.

  // hook
  const [state, setState] = useState('절대값');
  const [count, setCount] = useState(0);
  const [todoList, setTodoList] = useState[[]];

기본적으로 선언을 할때 [] 안의 0번째에 state를, 1번째엔 state를 set할 부분이 들어간다.
useState('')는 ()안에 절대값이 들어간다.

유저한테 받는 값을 set을 통해 useState에 있던 절대값을 바꿔주는 형태인가 보다.

사용법 연습겸 간단한 로그인 예제를 풀어봤는데, 여기서 알게된 몇가지 내용이 있다.

function App() {
    const [id, setId]= useState("");
    const [pw, setPw]= useState("");

    return (
        <div>
            <p>
                아이디 : <input 
                        value={id} 
                        onChange={(event)=>{setId(event.target.value)}}
                        // 이벤트의 경우 target이 필요. (콘솔로그 + F12 참고)
                        />
            </p>
            <p>
                비밀번호 : <input type="password"
                    value={pw} 
                    onChange={(event)=>{setPw(event.target.value)}}
                    // 이벤트의 경우 target이 필요. (콘솔로그 + F12 참고)
                    />
            </p>
            <button onClick={()=>{
                alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${pw}입니다.`)
                // document.querySelector('input').value = ""; // 인풋 값 초기화
                setId(''); // 초기화
                setPw(''); // 초기화
                }}>로그인</button>
        <br/>
    </div>) 
}

1. input 값 초기화는 JS식이 아닌 set을 초기화 해 주면 된다.
2. </태그> 안먹힌다. 단일 태그면서 닫는 표현을 할땐 <태그/>로 사용해야한다.