6. userState

# 함수에서 ( )를 넣으면 그 함수를 실행하라는 의미이다. 주의하자.

 

# useStete 란?

useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다.

setState 함수 사용 시 이전 state 값을 사용하고 싶으면 prevState를 이용하면 된다.

 

# 리액트 hook 이란?

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 리액트에서 HOOK을 사용하는 이유는 functional component 에서 state를 가질 수 있게 한다.

고로, 모든 것은 하나의 function 이 된다. 함수형 프로그래밍으로 모든 것을 할 수 있다.

1. app.js

import { useState } from 'react';
import './App.css';
import Sub from './Sub';

function App() {
  //let number = 1; // 상태값 아님
  const [number, setNumber] = useState(1); // React안에 Hooks 라이브러리 상태값이 됨.

  const add = () => {
    setNumber(number + 1); // 리엑트한테 number 값 변경할께 라고 요청
    console.log('add', number);
  };

  // 랜더링 시점 = 상태값 변경, setNumber를 호출할때 새롭게 랜더링이 된다.
  return (
    // 리턴 시점에 아래의 div 자원이 모두 새로 그려진다.
    <div>
      <h1>숫자:{number}</h1>
      <button onClick={add}>더하기</button>
      {/* js import Sub.js 다른 .js 파일을 추가 한다...!! */}
      {/* 컴포넌트 기반으로 개발을 하면 아래의 Sub 처럼 그릴것인지 안그릴 것인지 결정 할 수 있다.*/}
      <Sub />
    </div>
  );
}

export default App;

2. Sub.js

import React from 'react';

const Sub = () => {
  return (
    <div>
      <h1>Sub 입니다.</h1>
    </div>
  );
};

export default Sub;

3. 실행 화면, 더하기 버튼을 클릭하면 숫자가 하나씩 증가한다.

(6강 중간부터 문제풀이 강의가 있음... 나중에 다시 보고 정리 해야함.)