22-11-14-리액트(3)

Hook - useState

특정 변수를 지정하여 해당 변수가 변할 때마다 페이지를 업데이트하기

• useState

import React, {useState} from 'react';
function Resume(props) {
	const [like, setLike] = useState(0);
  	let heart = like % 2 === 1 ? '❤️' : ''
    
    function handleClickLike() {
    	setLike(like + 1);
    }
  	return (
        <div>
        	<button onClick={handleClickLike}>like : {like}</button>
        	<span>{heart ? heart : ''}</span>
        </div>
    )
}
function App() {
  return (
    <div>
      <Resume />
    </div>
  );
}

export default App;

import문에 {useState} 추가
state 변수와 state 변수의 상태를 바꿔줄 수 있는 함수 반환
구조 분해 할당 문법을 이용해 like, setLike에 변수와 함수를 할당
useState에 초기값 넣음
useState를 사용하여 setState를 통해 값이 변경될 때 리액트가 자동으로 해당 컴포넌트를 다시 랜더링함

이벤트 처리

React - 카멜케이스 사용, 함수로 이벤트 핸들러 전달
DOM - 소문자 사용, 문자열로 이벤트 전달

• DOM

onclick='addNumber()'

• React

function clickLike() {}
return (
	<button onClick={clickLike}>like</button>
)

• 전체 코드

import {useState} from 'react';
const Login = () => {
	const [id, setId] = useState('');
	const [pw, setPw] = useState('');
  	const handleLoginSubmit = (e) => {
    	e.preventDefault();
      	alert(`id : ${id} pw : ${pw}`);
    }
    const handleIdInput = (e) => {
    setId(e.target.value)
    }
    const handlePwInput = (e) => {
    setPw(e.target.value)
    }
    return (
      <form action="" onSubmit={handleLoginSubmit}>
        <label>
          아이디 : 
          <input type="text" onChange={handleIdInput}/>
        </label>
        <br />
        <label>
          패스워드 : 
          <input type="password" onChange={handlePwInput}/>
        </label>
        <button>로그인</button>
      </form>
    )
}
function App() {
  return (
    <div>
      <Login/>
    </div>
  );
}

export default App;