state 기본 사용법, state 변경하기

state 사용법

기본 사용법

• state 값이 변동 될 시 자동으로 html에 반영되게 만들고 싶을 때 사용한다.
• 자료를 잠깐 보관 할 때 state를 사용한다.(자주 변경되는것들)
• 자주 안바뀌는건 state를 사용할 필요 없다.

import { useState } from 'react';

function App() {

  let post = '강남 우동 맛집';
  let [a, b] = useState('남자 코트 추천')

  return (
   
   
  );
}

• 위 처럼, useState() 를 기재하면 상단에 import가 자동으로 생성된다.
• let [a, b] 는 useState(보관한 자료)에서 보관한 자료를 뽑아쓸 때 사용한다.
• a = state에 보관했던 자료 나옴.(변수랑 똑같이 사용하면 됨)
• b = state 변경 도와주는 함수

---

useState 배열으로 사용하기

참고 : Destructuring 문법

let [a, c] = [1, 2]​

변수 a에는 1 , c에는 2가 저장된다.

• useState는 배열으로도 사용 가능하다.

let [글제목, b] = useState(['남자 코트추천', '강남 우동맛집', '파이썬독학']);

return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color : 'red', fontSize : '16px'}}>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{글제목[0]}</h4>
        <p>9월 8일 발행</p>
      </div>      
      <div className='list'>
        <h4>{글제목[1]}</h4>
        <p>9월 8일 발행</p>
      </div>  
      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>9월 8일 발행</p>
      </div>  
    </div>
  );
}

결과

---

onClick 속성 사용 시 함수 간단하게 만들기

• onClick 속성 안에는 "함수"만 들어갈 수 있는데, 함수 만드는 문법은 자바스크립트와는 다르다.

<h4>{글제목[0]} <spna onClick={ () => {코드내용}}>👍</spna> {따봉} </h4>
//여기서 () => {}      는      function(){} 와 같은 역할을 한다.

---

state 변경하기

 

• state를 변경해보자.

let [따봉, 따봉변경] = useState(0);
// 따봉변경 = useState의 값을 변경해주는 함수의 이름이다.

  
  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color : 'red', fontSize : '16px'}}>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{글제목[0]} <spna onClick={ () => { 따봉변경(따봉+1)}}>👍</spna> {따봉} </h4>
// 					👍 를 누르면 따봉의 숫자가 1씩 증가하게 만들기        
        <p>9월 8일 발행</p>
      </div>

 

따봉 이모티콘을 누르면 옆에 숫자가 올라감

---

state 변경하기2

• state의 배열안의 0번째를 수정해보자.

let [글제목, 글제목변경] = useState(['남자 코트추천', '강남 우동맛집', '파이썬독학']);
  let [따봉, 따봉변경] = useState(0);

    <div className="App">
      <div className="black-nav">
        <h4 style={{color : 'red', fontSize : '16px'}}>ReactBlog</h4>
        <button onClick={ () => { 
          let copy = [...글제목];      
          copy[0] = '여자 코트추천'
          }}>변경버튼</button>
      </div>
      <div className='list'>
        <h4>{글제목[0]} <spna onClick={ () => { 따봉변경(따봉+1)}}>👍</spna> {따봉} </h4>
        <p>9월 8일 발행</p>
      </div>

• [...변수이름]  =  괄호를 벗기고 다시 생성해달라는 뜻. 독립적인 array를 생성하는 과정임.
• 글제목변경(copy); /*array, object 같은 경우, 원본은 남겨두고 카피본을 만들어서 바꿔주는게 좋다.

---

state를 써야하는 이유

• state를 쓰던 html은 state가 변경되면 자동으로 재렌더링 된다.