Coding Apple, React 강좌 내용 정리.3 - state

React에서 state를 쓰는 이유, 방법을 알아보기

데이터를,

1. 변수 (let , var)에 넣거나
2. state (useState() 이용해서) 에 넣거나

  state 만드는 방법  

1. import React, {useState} from 'react'

- React에 있는 함수를 쓰겠다. useState를 쓰기 위해서

2. useState('저장할 값')

* ES6 destructuring 문법 중에서
이 2개 데이터를 변수에 담고 싶으면
var [a, b] = [10, 100];  // var a = 10 , var b = 100

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

function App() {
  // ES6 destructuring 문법
  // 이 2개 데이터를 변수에 담고싶으면
  // var [a,b] = [10, 100];  // var a = 10 , var b = 100

  // 데이터 공간 [a,b] <- [데이터 값, 데이터 값을 변경해주는 함수]
  let [글제목, 글제목변경] = useState('맛집 추천');
  
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{글제목}</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;

[결과값]

state는

1. 변수 대신 쓰는 데이터 저장공간 (array)

2. useState()를 이용해 만들어야 한다

3. 문자, 숫자, array, object 다 저장 가능

ex) let [글제목2, 글제목변경2] = useState(['AA', 'BB']); // 배열로 값들을 넣고

     {글제목2[1]} // 배열처럼 사용한다

 

  사용 이유?  

• 웹이 App처럼 동작하게 만들고 싶어서.
• state는 변경되면 html이 자동으로 다시 렌더링 된다 <ajax?>
• 일반 변수들은 변경되어도 자동 재 렌더링이 안된다 (페이지 새로고침)

자주 바뀌는, 중요한 데이터는 변수 말고 state를 사용한다.

 

터미널에 보이는 warning이 보기 싫으면

/* eslint-disable */ 을

맨 상단에 쓴다

eslint disable 쓰기 전과 후