state사용하기

글 목록 생성

function App(){
 
  let posts = '리액트 시작';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ posts }</h3>
        <p>4월 13일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

메인 페이지에 위와 같은 글 목록을 하나 만들었다.

---

state 사용

리액트에서 데이터를 저장하는 방법에는 {}안에 변수를 넣는 방법과 state를 만드는 방법이 있다.

다음과 같이 코드를 수정해보았다.

// state를 사용하기위해 임포트
import React, { useState } from 'react';
import './App.css'

function App(){
 
  let [a,b] = useState('JSX란');
  let posts = '리액트 시작';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ posts }</h3>
        <p>4월 13일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

useState() 함수는 state를 만들어 주는 함수이다.

useState( 저장할 데이터 ) 이렇게 사용해 state에 데이터를 저장할 수 있다.

[데이터1, 데이터2] 라는 배열은 각각 실제 저장할 데이터와, 저장한 데이터를 변경 시킬 함수가 들어가 있다.

destructuring 문법
배열안에 들어있는 데이터를 변수로 저장 할 때 쓰는 ES6문법이다.

var array = ['Kim', 20];
var name = array[0];
var age = array[1];

['Kim', 20] 이라는 array 자료형에서 Kim이랑 20이라는 자료를 각각 변수에 저장했다.

하지만 똑같은 방법을 아래와 같이 작성할 수 있다.

var [name, age] = ['Kim', 20]

즉 let [a,b] = useState('JSX란'); 의 a는 JSX란 이라는 글제목이 되며, b는 글 제목을 변경 할 때 사용하는 함수가 된다.

let [글제목, 글제목변경] = useState(JSX란');

---

state 데이터 바인딩하기

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

function App(){
 // let [a,b] = useState('JSX란');`
  let [글제목, 글제목변경] = useState('JSX란');
  let posts = '리액트 시작';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목 }</h3>
        <p>4월 13일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

state도 일반 변수처럼 쉽게 데이터바인딩이 가능하며, 배열이나 오브젝트도 넣을 수 있다.

 let [글제목, 글제목변경] = useState( ['JSX란', 'state사용하기'] );

---

state 사용하는 이유

state를 사용하는 이유는 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링하기 위해 사용한다.

즉 화면의 새로고침 없이 자연스러운 데이터의 변경이 필요할 때 사용한다.

그러므로 블로그의 로고명과 같은 자주 변경이 일어나지 않을 데이터는 변수로 사용하고, 상품명, 글 제목, 가격등 자주 변하는 데이터들을 state로 만들어 사용하는 것이 좋은 습관이다.

---

데이터 변경하기

function App(){
  
  let [ 추천, 추천변경 ] = useState(0);
  return (
    ...
      <h3> { 글제목[0] } <span>?</span> { 따봉 }</h3>
   ...
  )

위 코드에 추천이라는 state를 추가하고 버튼이 눌리면 추천이 하나씩 증가하도록 해보자.

<div onclick="실행할 자바스크립트">

일반적으로는 위처럼 onclick을 사용하지만 JSX에서는 다음과 같이 사용한다.

<div onClick={실행할 함수}>

다른 점은 이렇다.

1. Click이 대문자로 시작
2. {}
3. 함수를 작성

---

onClick작성하기

위 3번인 함수를 작성하는 방법에 대해 예를 들어보겠다.

<div onClick={ showModal }>  (showModal은 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>

onClick={} 안에 함수명을 적거나 함수 하나를 바로 만들어서 집어넣어주면 된다.

let [ 추천, 추천변경 ] = useState(0);를 보자.
추천 변경이라는 변수는 추천의 state를 변경하는 함수이므로 추천 변경을 사용해야한다.

다음의 코드를 보자.

<h3> { 글제목[0] } <span onClick={ ()=>{ 추천변경(추천 + 1) } } >?</span> { 추천 }</h3>

?가 클릭이 되면 추천 변경이라는 함수는 추천이라는 변수에 1을 더해 준다.

---

정리

1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용.

2. state를 변경하려면 state 변경함수를 이용.