react useState(hook)

Posted on Edited on In ,

react hook을 쓰는 이유

최근 공부를 위해서 react class 를 중심적으로 썻는데 엄청나게 정신없고 state 관리와
this가 연달아 나와서 정리가 전혀 안되는 것을 깨달았다. 그게 이유인 것인지
16.8버전부터 react hook을 통해서 간단하게 상태를 보관 이용이 가능해진 것을 보아
나만 힘들었건 아니었던거 같다.

😥

react useState가 편리한 이유

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.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>
    );
  }
}

class 로 리엑트를 구성하면 위의 공식문서 코드처럼 this 사용이 빈번하다.
관련없는 코드를 건드는 일도 많아지고.. 그렇기에 useState()와 같은 함수 묶음으로 쉽게 처리하는게 직접 써보니 확실히 간단한 것을 알 수 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//useState hook과 함수형 react 사용시
 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

간단한 예시말고도 많은 수의 경우는 어떻게 쓰는지도 공부하였다.

JSON 데이터를 불러올시의 useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState } from 'react';

function App() {
  const [inputs] = useState({"Search":
  [{"Title":"Bet on Revenge","Year":"2017","imdbID":"tt4964310","Type":"movie","Poster"
  :"https://m.media-amazon.com/images/M/MV5BNzU1YzkzYzQtYTdkMS00ZWM1LThjOWQtMjg1NGIwM2I0MDc5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNTkzMzMyNDA@._V1_SX300.jpg"}
  ,{"Title":"You Bet Your Life","Year":"1950–1961",
  "imdbID":"tt0042171","Type":"series","Poster":"https://m.media-amazon.com/images/M/MV5BNjQxNTllYzgtYjUwMS00NDhmLTgwYjUtMzc4NTlmZGI5YzhlXkEyXkFqcGdeQXVyNjE5MjUyOTM@._V1_SX300.jpg"}
  ,{"Title":"Bet Your Life","Year":"2004","imdbID":"tt0381980","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BOTk1MzUyMjU3NV5BMl5BanBnXkFtZTcwNzkwMTY2MQ@@._V1_SX300.jpg"},
  {"Title":"Early to Bet","Year":"1951","imdbID":"tt0043495","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BODdhOWY4YmEtY2ZkZi00NWQ4LWE0NGQtOGZlZWFiN2QxNGRhXkEyXkFqcGdeQXVyNjc2NjkzNTg@._V1_SX300.jpg"},
  {"Title":"The Top Bet","Year":"1991","imdbID":"tt0101780","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTUzOTczNTc4NV5BMl5BanBnXkFtZTgwMzE0ODc2MzE@._V1_SX300.jpg"},
  {"Title":"Don't Bet on Blondes","Year":"1935","imdbID":"tt0026289","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BM2I5M2ExOTctNzJkZi00OTRjLTkxMTMtODNiODE4ZGU3NWI4XkEyXkFqcGdeQXVyNjE5MjUyOTM@._V1_SX300.jpg"},
  {"Title":"Bet Raise Fold","Year":"2013","imdbID":"tt2719370","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTY3MDgwODE0OF5BMl5BanBnXkFtZTcwNzY0MTA4OQ@@._V1_SX300.jpg"},
  {"Title":"Deadly Bet","Year":"1992","imdbID":"tt0104066","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTk5MDg5OTU4MV5BMl5BanBnXkFtZTcwNDEwMDYxMQ@@._V1_SX300.jpg"},
  {"Title":"Outside Bet","Year":"2012","imdbID":"tt1772422","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMTgzOTUxMzY3MV5BMl5BanBnXkFtZTcwNDk2MDc2Nw@@._V1_SX300.jpg"},
  {"Title":"The Big Bet","Year":"1987","imdbID":"tt0088800","Type":"movie","Poster":
  "https://m.media-amazon.com/images/M/MV5BMWY5OTc2YjEtZTVmOC00MTkwLWFiZmItMmQyYmQzZGE3OGUzXkEyXkFqcGdeQXVyMTY5Nzc4MDY@._V1_SX300.jpg"}],
  "totalResults":"350","Response":"True"});

  // 비구조화 할당을 통해 값 추출
  const arrayData= inputs.Search.map((itme,index)=>{
  return (
    <li key={index}>
    {itme.Title} {itme.Year}    
    </li>
  );
  }
  )
    return(
    <div>{ arrayData} </div>
  )

}
  
export default App;

json 데이터 파싱하는 것에 시간이 엄청 걸린다는 것을 생각한다면 엄청 깔끔하게 결과를 UI에 표시할수 있게 되었다.