#React useState 사용하기

이번엔 useState를 사용해 보겠다

 

useState라는 것은 react에 있어서 스무스하게 하도록 하는 저장 기능이라고 한다

 

그래서 앱처럼 움직이게 할려면 변수에 저장하는 게 아니라, useState에 넣어서 사용해야 하고,

 

자주 변경될만한 것을 대상으로 한다

 

일단 useState 라는 것을 import 시키고 나서, 

 

[] = userState( 값 ); 를 적는다

뭐같이 2개이네 ㅎ

 

useState()를 쓰다면, 반환되는 값이 [값 1, 값 2]가 반환된다고 한다

 

값1 이 userState( 값 ) 이 되고, 값 2가 변경될 값이라고 한다

 

그다음은 바인딩을 변수와 똑같이 { } 를 사용하면 된다!

 

너무 편해

이렇게 하면 useState를 사용하는 방법이 되겠다

 

그리고

 

useState() 의 값은 

어떤 값이 들어가도 된다 ex ) Array, Object 등

 

 

state 변경하기

이번엔 [값1, 값2] 중에 값2를 사용하는 방법을 하겠다

 

일단 값2는 함수이기 때문에

 

값2() <- 이런식으로 사용하며 ( ) 안에는 변경하고 싶은 값을 넣어주면 된다

 

에로우뻥션 이거 다 알지? 모르는 흑우 없제?

p 태그를 클릭을 하였을때, 함수를 실행시키고 변경을 하는것이다.

 

<p onClick={ () => { setMyString(myString + myString) } }>{ myString }</p>

위의 코드는 myString을 계속 추가하는 코드 이다

 

 

그리고 브라우저에서 helloWorld를 눌러보면! 글자가 계속 추가되는 것을 볼 수가 있다 

짜잔

 

이런식으로, 좋아요를 클릭했을때라던지 유용하게 사용할 수 있다