004. React Hooks : useState

react를 본격적으로 사용해 보자.

동적으로 변수를 사용하기 위해 Hooks라는 것을 도입했다.

첫번째로 배울 것은 useState,

이런 형태의 프로그램을 만들예정이다.

바로 추가해주자. (코드 재사용 안 함)

 

Counter.js

import React, { useState } from "react";

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

export default Counter;

이거 짜는데 만약에 힘들었다, 그렇다면 html먼저 배우길 바란다. 이걸 배울 때가 아니다.

React를 배울 정도면 이건 힘든 게 아니다. 

 

이제, vanillaJS(기본 JS)를 해봤다면(안 했다면 하러 가는 것을 추천한다), 여기서 버튼을 움직이게 만드는 아이디어를 떠올리고 onClick을 떠올리는 것도 어렵진 않다.

 

그 컨셉은 같고, 

위와같이 document를 쓸 수 없기 때문에, (엄밀히 말하면 쓸 수 있는데, 초기상태의 null때문에 문제다.)

이미 답이 위에 살짝 나와버렸는데, 코드는 다음과 같다.

const [x,setX] = useState(특정초기값) 

ex.1) const [x,setX] = useState({
	a: 0,
    b: '',
}) 

이 포맷이 좀 국룰이다.

x를 결과값으로 쓰고, setX함수에 변형 동작을 줘서 동적으로 값을 사용한다. useState은 x에 초기값을 주는 것이고, 객체 형태로 전달할 수도 있다.

 

Counter.js

import React, { useState } from "react";

const Counter = () => {
  const [Number, setNumber] = useState(0);
  return (
    <div>
      <h1>{Number} </h1>
      <div>
        <button onClick={() => setNumber(Number + 1)}>+1</button>
        <button onClick={() => setNumber(Number - 1)}>-1</button>
      </div>
    </div>
  );
};

export default Counter;

이 글을 보는 당신은 이미 몇번 해봤으니, App.js 렌더링은 생략하겠다.

onClick에 왜 함수를 저따구로 넣냐면, 흐름이 이상해져 버리기 때문이다. eventlistener에 함수를 넣는 것과 같은 느낌

 

중괄호를 친 내용들은 모두 js형 문법을 사용하거나, 값을 가져왔기에 그렇다는 건 여기봤으면 다 알겠지?

글이 간결하니 모른다면 보고 오면 좋다

 

잘 된다.

 

button은 알겠고

input은? 좀 더 많은 일을 할 수 있을 텐데...

 

어 물론이지

onChange를 사용하고, props로 value를 넘기면 된다.

1씩 움직이는 건 재미가 없으니까 원하는 값으로 옮겨보자.

<input type="number" value={Number} onChange={} />

이것을 원하는 곳에 추가해준다.

저기를 수정해주면 끝.

 

함수를 따로 만들어주는 게 큰 프로젝트에선 베스트지만, onChange안에 화살표 함수를 사용해서 넣는걸 좋아한다.

구현해주자

<input
        type="number"
        placeholder="input number to change"
        value={parseInt(Number) == 0 ? "" : parseInt(Number)}
        onChange={event => {
          setNumber(event.target.value === "" ? 0 : event.target.value);
        }}
      />

혹시나 모를 상황을 대비해 형변환 후 체킹을 통해 0이 같이 기입되버리는 상황을 방지했다.

잘된다