USESTATE Hooks

useState

import React from "react";
import ReactDOM from "react-dom";

function App() {
	return (
    	<div className="App">
        	<h1>Hello</h1>
            <h2>Start editing to see some magic happen!</h2>
        </div>
    );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

• useState는 항상 2개의 value를 return
• 첫번째 value를 item
• 두번째 value는 값을 변경하게 함

import React, {useState} from "react" // useState를 import

const [item, setItem] = useState(1);

• useState는 초기에 state를 InitialState를 세팅할 수 있는 옵션을 제공
• [item, setItem]의 이름을 주는 것은 선택사항 => 원하는 이름으로 변경해서 사용가능
• useState는 Array를 return 해야 함
• Array의 첫번째 요소가 item, 두번째 요소는 setItem이 됨
• 만약 item만 사용하고 싶다면 

const [item] = useState();

대신에 

const item = useState(1)[0];를 사용

• function을 수정하고 싶다면 

const item = useState(1)[1];으로 변경

<h1>Hello {item}</h1>

arrow function으로 변경

import React, {useState} from "react";
import ReactDOM from "react-dom";

const App() {
	const [item, setItem] = useState(1);
    const incrementItem = () => setItem(item + 1);
    const decrementItem = () => setItem(item - 1);
    return (
    	<div className="App">
        	<h1>Hello {item}</h1>
            <h2>Start editing to see some magic happen!</h2>
            <button onClick={incrementItem}>incrementItem</button>
            <button onClick={decrementItem}>decrementItem</button>
        </div>
    );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

• incrementItem 버튼은 item에 1을 더하여 화면에 표시
• decrementItem 버튼은 item에 1을 빼서 화면에 표시
• onClick은 이벤트 리스너로 버튼을 클릭하면 동작하도록 하는 역할을 함

class Component

• hooks가 생기기 전에 우리는 state를 함수형 component에 사용할 수 없었음
• class Component는 this와 같은 문장 규칙과 render와 같이 사용하는 방법 고려했어야 했음
• 하지만 hooks는 return에다가 뿌려주고 그 위에 작성하기만 하면 됨

class AppUgly extends React.Component {
	state = {
    	item: 1
    };
    render() {
    	const {item} = this.state;
        return (
        	<div className="App">
            	<h1>hello {item}</h1>
                <h2>Start editing to see some magic happen!</h2>
                <button onClick={this.incrementItem}>IncrementItem</button>
                <button onClick={this.decrementitem}>DecrementItem</button>
           </div>
       );
   }
   incrementItem = () => {
   	this.setState(state =>  {
    	return {
        	item: state.item + 1
        };
   	};
    decrementItem = () => {
    	this.setState(state => {
        	return {
            	item: state.item - 1;
            };
        }; 
    };
 }
 
const rootElement = document.getElementById("root");
ReactDOM.render(<AppUgly/>, rootElement);

• hooks를 사용하면 class Component를 사용하는 것보다 더 적은 코드를 사용하여 작성할 수 있음

 
공부 강의 : 노마더코더 - 실전형 리액트 Hooks 10개