| React | Hook의 useState + 자주바뀌는 데이터는 (변수말고) state에 담자~!

16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다.
즉 State, Life Cycle 등등 이 없기 떄문에 클래스형 컴포넌트를 사용 했었다. 
(현재는 클래스형 컴포넌트를 거의 사용 하지 않는다고 한다)
리액트 16.8부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
useState Hook을 사용하여 State 사용이 가능하다!!

 

리액트에서의 state란?

• 리액트에서는 컴포넌트 상태 
• 리액트 컴포넌트의 (변경가능한) 데이터
• 자바스크립트의 객체
• 보통 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.

 

우리는 그냥 let name= 'hyebin' 이렇게 변수에 데이터를 저장했었는데
리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다.
이번엔 state를 이용해 데이터를 저장해보도록 하자.!!

 

---

변수라는게 있는데 왜 state 써야 함❓

갑자기 변수에 있던걸 '자스 맛집'  ->  '리액트 맛집' 이렇게 바꾸고 싶은데 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게 하죠?

 

"변수 내용 바뀌었으니까 html도 고쳐주세요"라고 귀찮게 코드 짜야한다. (자바스크립트는 원래 그래야 함)

 

state자료는 그럴 필요 없다 

state는 변동사항이 생기면 state 쓰면 html도 자동으로 재 렌더링 해준다. 

그럼 뭐가 좋을까?

• 그리고 UI 기능 개발도 매우 편리
• 사이트들이 스무스하게 동작하는 것

 

 그럼  어떤 걸 변수로 하고, 어떤 걸 state로 할까요❓ 

state는 상품명, 글 제목, 가격 이런 것처럼 자주 변할 것 같은 데이터들을 저장하는 게 좋은 관습이다.

한마디로 자주 변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터 바인딩} 해놓자.

 

변경할 일이 없는 데이터들 ( ex : 로고 이런 것들 )

굳이 html에 표기가 필요 없는 데이터들은 그냥 변수에 저장해도 된다.

 

---

< state 만드는 법 >

 

1. 맨 윗줄에 import {useState} from 'react'  하고

원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다. 

 

 

2.  그리고 저장한 자료를 나중에 쓰고 싶으면

let [a, b] = useState('초깃값');

a 자리 state 이름을 자유롭게 작명

b 자리  state 변경 도와주는 함수 (보통 set 어쩌구로 함 )

 

위에는 자바스크립트 destructuring 문법인데 
내가 array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법입니다.
 
예를 들어서 ['woo', 20] 이렇게 생긴 array 자료를 만들어놨는데
Kim이랑 20이라는 자료를 각각 변수에 저장하고 싶으면
let array = ['woo', 20];
대충 이렇게 하나하나 해도 되는데
let name = array[0];
let age = array[1];

⚡ let [name, age] = ['woo', 20]
이렇게 하면 귀찮게 등호 여러 번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주시면  자동으로 알아서 변수가 생성

 

👉  state 배열의 형태로도 쓸 수 있다!!

let [title, setTitle ] = useState(["하나", "둘", "셋"]);

<h4>{title[0]}</h4>

 

< state 변경하는 법 >

🚫  아닌 예시

function App(){
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } 
    <span onClick={ () => { 따봉 = 따봉 + 1 } } >👍 < /span> 
    { 따봉 }</h4>
  )
}

그럴 싸 한데 저렇게 하면 왜 안 되나요?

그 이유는 저건 변수가 아니라 state이다. 

state는 state변경 함수를 써서 state를 변경해야 한다. 

( 아까 [a, b] 중에 b는 변경해주는 함수라고 했다)

 

😇  이게 정답 예시 

function App(){
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } 
      <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span>
      { 따봉 }</h4>
  )
}

 

 

 

[참고]

코딩애플