React - useState - 1

React useState

React useState 란 컴포넌트가 가질 수 있는, 또는 변할 수 있는 상태의 값이라고 한다. 

useState를 변수에 저장하기 위해 Distructuring 문법을 사용하여 저장할 수 있다.

//useState 변수 선언
let [ 상태값 저장 변수 , 상태값 갱신 함수] = useState(상태초기값);

 

변수와 state의 차이점은 변수가 변경이 되면 html에 자동으로 반영이 안되지만,

state는 자동으로 html이 재랜더링이 된다.

// App.js

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



function App() {

  let post = 'Restaurant';
  let postId = 'postId';
  let [title, setTitle] = useState('Title');	// state로 선언하여 재랜더링이 가능하다.
  let [blogTItle, setBlogTitle] = useState('ReactBlog');	// state로 선언


  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={postId} style={{ color: 'red', fontSize: '16px' }}>{ blogTItle }</h4>
      </div>
      <div className="list">
        <h4>{ title }</h4>	// state 변수로 html에 적용하여 재랜더링이 가능하도록 했다.
        <p>4월 26일</p>
      </div>
    </div>
  );
}

export default App;

 

/* App.css */

div {
  box-sizing: border-box;
}

.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid gray;
}

 

 

 

반응형

 

 

 

state에 배열을 변수로 넣어서 사용할 수 있다.

// App.js

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



function App() {

  let post = 'Restaurant';
  let postId = 'postId';
  
  // useState 값 속에 배열로 선언한다.
  let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']);
  let [blogTItle, setBlogTitle] = useState('ReactBlog');


  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={postId} style={{ color: 'red', fontSize: '16px' }}>{ blogTItle }</h4>
      </div>
      <div className="list">
        <h4>{ title[0] }</h4>	// 0번째 값(Title1)을 불러온다.
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{ title[1] }</h4>	// 1번째 값(Title2)을 불러온다.
        <p>4월 26일</p>
      </div>
      <div className="list">
        <h4>{ title[2] }</h4>	// 2번째 값(Title3)을 불러온다.
        <p>4월 26일</p>
      </div>
    </div>
  );
}

export default App;