useState

1. Counter.js를 만들기

import React from 'react';

function Counter(){
  return(
    	<div>
    		<h1>0</h1>
    		<button>+1</button>
    		<button>-1</button>
    	</div>
	);
}

export default Counter;

2. App.js에서 불러오기

import React from 'react';
import Counter from './Counter.js';

function App(){
  return(
    	<Counter />
    );
}

export default App;

-1과 2를 통해 UI 완성-

3. Counter.js에 이벤트 설정

import React from 'react';

function Counter(){
  const onIncrease = () => {
  	console.log(+1)
	}
  const onDecrease = () => {
    console.log(-1)
  	}
  return(
    	<div>
    		<h1>0</h1>
    		<button>+1</button>
    		<button>-1</button>
    	</div>
	);
}

export default Counter;

동적인 값 넣기

4. useState 사용

import React, { useState } from 'react'; /*React에서 useState 함수 불러오기*/

function Counter(){
  const [number, setNumber] = useState(0); /* 배열 비구조화 할당
                                              const numberState = useState(0);
                                              const number = numberState[0];
                                              const setNumber = numberState[1]; */
	
  const onIncrease = () => {
    setNumber(number + 1);                /* setter 함수는 값을 최신상태로 설정 */
  	} 
  
  const onDecrease = () => {
    setNumber(number - 1);
  	}
  
  return(
    	<div>
    		<h1>{number}</h1>
    		<button>+1</button>
    		<button>-1</button>
    	</div>
	);
}

export default Counter;

함수형

import React, { useState } from 'react';

function Counter(){
  const [number, setNumber] = useState(0); 
	
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);           /* 컴포넌트 최적화에 사용*/     
  	} 
  
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  	}
  
  return(
    	<div>
    		<h1>{number}</h1>
    		<button>+1</button>
    		<button>-1</button>
    	</div>
	);
}

export default Counter;