[React] 4. 동적변수는 무조건 State사용할것

React를 굳이 사용하는 이유는 웹을 앱처럼 빠르게 동작하고 싶어서 그런것이다.

 

그렇지만 그냥 일반적인 변수를 사용하게 되면 "페이지를 새로고침"해야지만 변경사항이 적용된다.

 

React에서는 이러한 타임로스를 지양하고 HTML의 재랜더링을 원하는데

이때 사용하는 것이 State이다(React의 저장공간)

 

 

1. 사용법

import React, { useState } from 'react';

기존의 변수를 대입하듯이 useState를 써준다.

 

 

let [글제목,글제목변경] = useState('남자 코트 추천');

 //useState()사용시 -> [a,b] a에는 '남자~'가 그대로 들어가고  //b에는 state를 정정해주는 함수가 들어간다.

  

 

2. 이때 state는 단순히 변수 뿐만 아니라 배열도 넣을수 있다.

ex) let [글제목2,글제목변경2] = useState( [ '남자 코트 추천' , '강남 우동 맛집' ] );

 

 

3. 이렇게 state로 설정된 변수들은 기존의 {글제목}를 사용하듯이 사용해주면 된다.

//정적인 것들은 바뀌는 경우가 없으므로 그런것들은 그냥 변수로 하는게 좋다.

//즉, 매번 변경되는 부분만 state로 해주면된다.

 

 

 

import React, { useState } from 'react'; import "./App.css"; // React안에 있는 내장함수 {useState} <- 리액트의 저장공간 state function App() {      var now = new Date(); // 현재 날짜 및 시간   let time =now.getFullYear()+'.'+now.getMonth()+'.'+now.getDate();   //destructor 문법 == 형식만 맞추면 알아서 변수설정을 해줌   //ex) [a,b]=[10,100]; -> a=10, b=100이 들어옴      let [글제목,글제목변경] = useState('남자 코트 추천');     //useState()사용시 -> [a,b] a에는 '남자~'가 그대로 들어가고  //b에는 state를 정정해주는 함수가 들어간다.   let [글제목2,글제목변경2] = useState(['남자 코트 추천','강남 우동 맛집']);   let [시간,변경시간] = useState(time);   let [게시글제목,게시글제목변경] = useState('제목');   return (    <div className="App">     <div className="black-nav">       <div>개발 Blog</div>     </div>        <div className="list">       <h3> { 글제목 } </h3>       <h3> { 글제목2[0] } </h3>       <p>2월 17일 발행</p>       <hr/>     </div>     <div className="list">       <h2>{ 게시글제목 }</h2>       <h3>{ 시간 }</h3>       <hr/>     </div>          <div className="list">       <h2>{ 게시글제목 }</h2>       <h3>{ 시간 }</h3>       <hr/>     </div>            <div className="list">       <h2>{ 게시글제목 }</h2>       <h3>{ 시간 }</h3>       <hr/>     </div>   </div>   ); } export default App;