useState Hooks - 풀스택개발 EastFlag

클래스 컴포넌트의 state 가 useState로 변경

상태관리를 하기 위해서는 반드시 클래스 컴포넌트가 되어야 했고, 클래스 컴포넌트에서 state 변수를 선언하고 상태를 바꾸기 위해서는 setState 메서드로 변경해야만 했다.

변수 선언

array 해체 할당 문법을 사용하여 각각 count 속성과 setCount 메서드를 받는다. useState(0) 의 0은 초기 count 값이다.

const [count, setCount] = useState(0)

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

메서드 사용

onClick={() => setCount(count + 1)}

1	onClick={() => setCount(count + 1)}

Q) 다음 클래스 컴포넌트를 useState hooks를 사용하여 바꾸시오.

class Counter extends React.Component {
  state = {
    count: 0
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'))

class Counter extends React.Component {

state = {

count: 0

}

render() {

return (

<div>

<p>You clicked {this.state.count} times</p>

<button onClick={() => this.setState({ count: this.state.count + 1 })}>

Click me

</button>

</div>

);

}

ReactDOM.render(<Counter />, document.getElementById('app'))

const { useState } = React;

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('app'))

const { useState } = React;

function Counter() {

// Declare a new state variable, which we'll call "count"

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

return (

<div>

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

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

Click me

</button>

</div>

);

}

ReactDOM.render(<Counter />, document.getElementById('app'))

CodePen

See the Pen react useState Hooks example by LeeDongKee (@eastflag) on CodePen.default

App.jsx에 hooks 적용하기

scoreboard 앱의 App.jsx에 hook을 적용해보자.

useState 훅을 사용시 하나의 변수는 하나씩 할당한다. 만일 state 에 a, b 두가지 상태 변수가 할당 되어있었다면 useState는 두번 선언한다.

state 라는 json에 players라는 키 값에 배열이 선언되었는데 players를 키값을 useState의 변수 이름으로 설정하고 배열 값을 useEffect() 의 값으로 넣는다.

import React, {useState} from 'react';
import './App.css';
import Header from "./components/Header";
import AddPlayerForm from "./components/AddPlayerForm";
import _ from "lodash";
import {CustomPlayer} from "./components/CustomPlayer";

const App = () => {
  const [players, setPlayers] = useState([
    {name: 'LDK', score: 0, id: 1},
    {name: 'HONG', score: 0, id: 2},
    {name: 'KIM', score: 0, id: 3},
    {name: 'PARK', score: 0, id: 4},
  ]);

  const  handleRemovePlayer = (id) => {
    setPlayers(players.filter(item => item.id !== id));
  }

  const handleChangeScore = (id, delta) => {
    console.log('id: ' + id, 'delta: ' + delta);
    players.forEach(player => {
      if (player.id === id) {
        player.score += delta;
      }
    });
    setPlayers([ ...players ]);
  }

  const handleAddPlayer = (name) => {
    const maxObject = _.maxBy(players, 'id');
    const maxId = maxObject.id + 1;
    console.log(maxId);
    players.unshift({id: maxId, name, score: 0});
    setPlayers([ ...players ]);
  };

  const getHighScore = () => {
    const maxObject = _.maxBy(players, 'score');
    const highScore = maxObject.score;
    // 0은 디폴트이므로  0보다 클 경우만 highScore로 지정한다.
    return highScore > 0 ? highScore : null;
  }

  return (
    <div className="scoreboard">
      <Header title="My scoreboard" players={players} />

      {/*Players List*/}
      { players.map(item => <CustomPlayer key={item.id.toString()}
                                                     id={item.id}
                                                     name={item.name}
                                                     score={item.score}
                                                     isHighScore={item.score === getHighScore()}
                                                     removePlayer={handleRemovePlayer}
                                                     changeScore={handleChangeScore}
      />)
      }

      <AddPlayerForm addPlayer={handleAddPlayer} />
    </div>
  );
}

export default App;

import React, {useState} from 'react';

import './App.css';

import Header from "./components/Header";

import AddPlayerForm from "./components/AddPlayerForm";

import _ from "lodash";

import {CustomPlayer} from "./components/CustomPlayer";

const App = () => {

const [players, setPlayers] = useState([

{name: 'LDK', score: 0, id: 1},

{name: 'HONG', score: 0, id: 2},

{name: 'KIM', score: 0, id: 3},

{name: 'PARK', score: 0, id: 4},

]);

const handleRemovePlayer = (id) => {

setPlayers(players.filter(item => item.id !== id));

}

const handleChangeScore = (id, delta) => {

console.log('id: ' + id, 'delta: ' + delta);

players.forEach(player => {

if (player.id === id) {

player.score += delta;

}

});

setPlayers([ ...players ]);

}

const handleAddPlayer = (name) => {

const maxObject = _.maxBy(players, 'id');

const maxId = maxObject.id + 1;

console.log(maxId);

players.unshift({id: maxId, name, score: 0});

setPlayers([ ...players ]);

};

const getHighScore = () => {

const maxObject = _.maxBy(players, 'score');

const highScore = maxObject.score;

// 0은 디폴트이므로 0보다 클 경우만 highScore로 지정한다.

return highScore > 0 ? highScore : null;

}

return (

{/*Players List*/}

{ players.map(item => <CustomPlayer key={item.id.toString()}

id={item.id}

name={item.name}

score={item.score}

isHighScore={item.score === getHighScore()}

removePlayer={handleRemovePlayer}

changeScore={handleChangeScore}

/>)

}

</div>

);

}

export default App;

AddPlayerForm에 hooks 적용하기

class 컴포넌트를 먼저 funtion 컴포넌트로 변경하고 변수 부분부터 수정한다.

클래스 멤버 변수나 함수는 let 이나 const 로 변수 선언해서 사용한다.

import React, {useState} from 'react';

const AddPlayerForm = (props) => {
  const [value, setValue] = useState('');

  let formRef = React.createRef();
  let textRef = React.createRef();

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const form = formRef.current; // form node
    const player = textRef.current; // input node

    console.log(form.checkValidity());
    console.log(player.validity.valid);

    if (!form.checkValidity()) {
      return;
    }

    props.addPlayer(value);
    setValue('');
  }

  return (
    <form ref={formRef} className="form" onSubmit={handleSubmit} noValidate>
      <input ref={textRef} className="input" type="text" placeholder="enter a player's name"
             value={value} onChange={handleValueChange}
             required></input>
      <input className="input" type="submit" value="Add Player"></input>
    </form>
  )
}

export default AddPlayerForm;

import React, {useState} from 'react';

const AddPlayerForm = (props) => {

const [value, setValue] = useState('');

let formRef = React.createRef();

let textRef = React.createRef();

const handleValueChange = (e) => {

setValue(e.target.value);

};

const handleSubmit = (e) => {

e.preventDefault();

const form = formRef.current; // form node

const player = textRef.current; // input node

console.log(form.checkValidity());

console.log(player.validity.valid);

if (!form.checkValidity()) {

return;

}

props.addPlayer(value);

setValue('');

}

return (

<input ref={textRef} className="input" type="text" placeholder="enter a player's name"

value={value} onChange={handleValueChange}

required></input>

</form>

)

}

export default AddPlayerForm;