2. useState

2.1 useState란?

2.1.1 state

// 함수형 컴포넌트
function Product() {
	// const [state, setState] = useState(초깃값);
	const [price, setPrice] = useState(1000);

// 클래스형 컴포넌트
class Product extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			price: 1000
	};
}

function Introduce(props) {                                  // --- ②
	return <h1>나는 {props.color}색을 좋아해!</h1>;
}

const root =
ReactDOM.createRoot(document.getElementById("root"));
const element = <Introduce color="초록" />;                   // --- ①

root.render(element);

2.1.2 setState

<button onClick={() => this.setState({ price: this.state.price + 100})}>가격 인상⬆️</button>

2.1.3 useState

• 상태를 유지하는 값인 state 변수와 그 값을 갱신하는 setState 함수를 쌍으로 반환합니다.

• useState 호출 시, 컴포넌트 state는 완전히 독립적으로 이루어져 작동됩니다.

• 함수형 컴포넌트에서는 state의 초깃값으로 아래 코드와 같이 객체를 포함한 배열, 문자, 숫자 타입을 가질 수 있으며, 하나의 컴포넌트 안에서 여러 개의 useState Hook을 사용할 수 있습니다.

function Person() {
	// const [state, setState] = useState(초깃값);
	const [age, setAge] = useState(18);
	const [grade, setGrade] = useState("A");
	const [todos, setTodos] = useState([{ subject: "Math" }]);
	const [check, setCheck] = useState(false);
	...
}

2.2 useState를 사용하는 이유

2.2.1 일반 변수를 사용했을 때

// 함수형으로 사용할 때
function App() {
    let drink = 0; // 일반 변수 사용

    const drinkWater = () => {
        drink += 1;
        console.log(`버튼 클릭횟수: ${drink}번`);
    };

    return (
        <>
            <p>
                🥤 오늘은 물 <strong> {drink}</strong>잔을 마셨어요! // --- ⓵
            </p>
            <button onClick={drinkWater}>💧</button>
        </>
    );
}

export default App;

2.2.2 State 변수를 사용했을 때

import { useState } from "react";

function App() {
    const [drink, setDrink] = useState(0); // useState 사용

    const drinkWater = () => {
        setDrink(drink + 1);
    };

    return (
        <>
            <p>
                🥤 오늘은 물 <strong> {drink}</strong>잔을 마셨어요!
            </p>
            <button onClick={drinkWater}> 💧 </button>
            {console.log(`버튼 클릭횟수: ${drink}번`)}
        </>
    );
}

export default App;

2.2.3 React가 useState 사용을 권장하는 이유

const [state, setState] = useState(초깃값);

2.3 useState 사용해보기

npx create-react-app my-app .
// npx create-react-app my-app --template basic-react 
// 최소한의 필요한 파일만 설치됩니다.

2.3.1 import 하기

import { useState } from 'react';

💡

useState를 정확히 어디서 불러오는 건가요? React를 설치하면 생성되는 폴더들 중에는 node_module이라는 폴더가 있는데, 그 안에 있는 react 모듈 폴더를 잘 들여다보면 다양한 Hooks 함수들이 선언되어 있습니다. 여기에서 Hook을 불러와 사용합니다.

2.3.2 useState 선언하기

const [state, setState] = useState(초깃값);

const [count, setCount] = useState(0);

2.3.3 state 가져오기, 갱신하기

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>
    Click me
</button>

2.3.4 (실습) useState의 작동방식

import { useState } from "react";
import "./app.css";

function App() {
  const [count, setCount] = useState(0);
  console.log("렌더링 되었습니다.");
  console.log(`현재 count : ${count}`);
  return (
    <div>
      <img src="./라이캣.png" alt="라이캣"></img>
      <p>라이캣이 귀여우시다면 따봉을 눌러주세요!</p>
      <button
        onClick={() => {
          console.log("-----------");
          console.log("👍 버튼을 클릭했습니다.");
          setCount(count + 1);
          console.log(`렌더링 되기 전의 count : ${count}`);
        }}
      >
        👍
      </button>
      <span>{count}</span>
    </div>
  );
}
export default App;

💡

React Developer Tools 확장 프로그램을 설치하면 렌더링이 되는 구간을 표시해주는 것을 확인할 수 있습니다.

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision 47f63dc54 on 12/6/2022.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

1. 처음 서버를 실행했을 때, 컴포넌트가 렌더링되고 초깃값이 담긴 count를 출력합니다.

2. 이후, 👍 버튼을 클릭하면 바로 setCount 함수가 호출되고 현재 시점의 count를 출력합니다.

3. 렌더링이 된 후, 현재 시점의 count 값을 출력합니다.

1. setCount 함수가 호출되면 갱신할 값을 react 모듈 내 선언된 전역 변수에 할당해 줍니다.

2. 이후, 컴포넌트가 리렌더링되고 App.js가 다시 실행됩니다. 그럼 초깃값 0을 다시 useState에게 전달하면서 useState 함수가 호출됩니다.

3. 호출된 useState 함수는 먼저 react 모듈 내 선언된 전역 변수에 값이 있는지 확인합니다. 값이 있다면 초깃값 0은 무시되고 전역 변수에 저장해두었던 값과 setCount 함수를 반환합니다.

4. 위에서 useState는 [변수, 함수] 이렇게 두 가지 값을 반환한다고 했었죠? 반환받은 두 값은 구조 분해 할당을 통해 각각 count 변수와 setCount 함수에 할당됩니다.

2.4 (실습) useState 응용해보기

2.4.1 useState와 이벤트를 사용한 로그인 폼 만들어보기

1. 먼저 React 기본 Hook에서 제공하는 useState 함수를 사용하기 위해서는 React에서 useState를 import 받아와야 합니다. 모든 코드는 App.js에서 진행하겠습니다.

import { useState } from "react";

1. LoginForm 함수 컴포넌트를 만들어주고, 그 안에 state 변수를 선언해 줍니다.

import { useState } from "react";

// 함수 컴포넌트 안에서는 Hook을 이용하여 state를 사용할 수 있습니다.
function LoginForm() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

	return;
} 

function App() {
  return (
    <div>
      <LoginForm />
    </div>
  );
}
export default App;

1. state 변수를 선언해 주었으니, 이제 로그인 폼을 핸들링 하는 함수를 하나 만들어주겠습니다.

// login form을 핸들링 하는 함수

  const handleLoginForm = (event) => {
    event.preventDefault();
  };

1. id 와 password를 입력할 두 개의 input과 form을 제출할 수 있는 로그인 버튼으로 구성되도록 마크업을 작성하였습니다.

...

return (
    <form onSubmit={handleLoginForm}>
      <label>
        Id :
        <input type='text' value={id} placeholder='아이디를 입력해주세요.'/>
      </label>
      <label>
        Password :
        <input type='password' value={password} placeholder='비밀번호를 입력해주세요.'/>
      </label>
      <button type='submit'>Login</button>
    </form>
  );

1. id 와 password에 각각 이벤트 핸들러 함수를 만들어 주었습니다.

// id input을 핸들링 하는 함수
  const handleIdInput = (event) => {
    setId(event.target.value);
  };

  // password input을 핸들링 하는 함수
  const handlePasswordInput = (event) => {
    setPassword(event.target.value);
  };

1. 이벤트 핸들러 함수를 만들어 주었으니, 각 input에 onChange 이벤트도 등록해 줍니다.

...

return (
    <form onSubmit={handleLoginForm}>
      <label>
        Id :
        <input type='text' value={id} placeholder='아이디를 입력해주세요.' onChange={handleIdInput} />
      </label>
      <label>
        Password :
        <input type='password' value={password} placeholder='비밀번호를 입력해주세요.' onChange={handlePasswordInput} />
      </label>
      <button type='submit'>Login</button>
    </form>
  );

1. 이벤트를 등록했다면, 이제 변경된 값이 잘 들어오는지 확인하기 위해 이벤트 핸들러 함수에 코드를 추가해 보겠습니다.

	// login form을 핸들링 하는 함수
  const handleLoginForm = (event) => {
    event.preventDefault();
    console.log("로그인 버튼을 클릭했습니다.");
    alert(` Id : ${id} \n Password : ${password}`);
  };

  // id input을 핸들링 하는 함수
  const handleIdInput = (event) => {
    console.log("아이디를 입력합니다.");
		// console.log(event.target.value)를 넣어서 값을 확인해보세요.
		setId(event.target.value);
  };

  // password input을 핸들링 하는 함수
  const handlePasswordInput = (event) => {
    console.log("패스워드를 입력합니다.");
    setPassword(event.target.value);
  };

💡

이벤트 확인해보기 console.log(event) : 해당 이벤트의 객체 구조를 확인할 수 있습니다.

console.log(event.target) : 이벤트가 발생한 요소를 가리킵니다.

console.log(event.target.value) : 이벤트가 발생한 요소에 입력된 값을 확인합니다.

1. 이제 로그인 폼이 완성되었으니 코드를 실행시켜 보겠습니다.

2.4.2 최종 코드

import { useState } from "react";

function LoginForm() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const handleLoginForm = (event) => {
		event.preventDefault();
    console.log("로그인 버튼을 클릭했습니다.");
    alert(` Id : ${id} \n password : ${password}`);
  };

  const handleIdInput = (event) => {
    console.log("아이디를 입력합니다.");
    setId(event.target.value);
  };

  const handlePasswordInput = (event) => {
    console.log("패스워드를 입력합니다.");
    setPassword(event.target.value);
  };

  return (
    <form onSubmit={handleLoginForm}>
      <label>
        Email :
        <input type='text' value={id} placeholder='아이디를 입력해주세요.' onChange={handleIdInput} />
      </label>
      <label>
        Password :
        <input type='password' value={password} placeholder='비밀번호를 입력해주세요.' onChange={handlePasswordInput} />
      </label>
      <button type='submit'>Login</button>
    </form>
  );
}

function App() {
  return (
    <div>
      <LoginForm />
    </div>
  );
}
export default App;

💡

안전한 로그인 관련한 참고 자료

Insecure passwords - Web security | MDN

Serving login forms over HTTP is especially dangerous because of the wide variety of attacks that can be used against them to extract a user's password. Network eavesdroppers could steal a user's password by sniffing the network, or by modifying the served page in transit.

https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords