state란? 왜 쓰는 것일까? destructuring?

1. 왜 state를 써야할까

변수로 설정했을때는 값이 바뀌면 값이 바뀐 것으로 실행해야한다고 다시 코드 작성해야한다. 하지만 state로 만들어서 변수로 선언해주면 state는 자동으로 HTML을 전체 적으로 다시 젠더링 해주는 기능이 있기때문에 따로 작업을 안해도 된다. 

 

즉 : 자주 변경될 것 같은 HTML 부분을 state로 만들어 두면 됨

 

 

- 변수 설정 후 값을 바꿀때 

let post = '강남 우동 맛집' ---> '역삼 우동 맛집'

return(
    <div>
    
    	#추가추가추가 작업 어쩌구 저쩌구 
    
    	<h4>{post}</h4>
    </div>
  );
}

 

- state 설정 후 값을 바꿀때

let [a,b] = useState('남자 코트 추천'); ----> '여자 코트 추천'

return(
    <div>
    	<h4>{a}</h4>
    </div>
  );
}

 

 

2. state 사용방법

import {useState} from "react";

function App() {

    let post = '자료 잠깐 저장할 땐 변수'
    let [a, b] = useState('보관할 자료'); //사용하려면 변수 설정
    
    return (
    	<div>
        	<h4> {a} </h4> //state 자료 불러올 수 있음
        </div>
    );
}

 

 

3. state, 함수 이용 (좋아요 버튼 만들기 누를때마다 1씩 증가)

결과물

 

[React] - React 좋아요 누를때마다 1씩 증가하는 버튼 만들기

React 좋아요 누를때마다 1씩 증가하는 버튼 만들기

해당 링크 참고

 

 

4. Button을 누르면 state 변경 값으로 전환 *원본 데이터 보존

 

[React] - 리액트 Button을 누르면 state 변경 값으로 전환 *원본 데이터 보존

리액트 Button을 누르면 state 변경 값으로 전환 *원본 데이터 보존

해당 링크 참고

 

5. destructuring 사용법

function App() {

    let post = '자료 잠깐 저장할 땐 변수'
    let [a, b] = useState('남자 코트 추천');

//destructuring 문법
    let num = [1,2];
    
    //let c = num[0]; //묶여있는 것을 각각의 변수에 넣어서 풀 수 있음
    //let d = num[1];
    
    let[c,d] = [1,2]; //위에 두 줄 줄인 거
    
    return ();
}