state

• 컴포넌트가 가질 수 있는 상태
• 변동시 자동으로 html에 반영되게 하고 싶을 때 사용
• 고정적인 글은 state로 굳이 할 필요 없음

_React Hooks의 useState

컴포넌트의 state를 간편히 생성하고 업데이트를 해줄 수 있는 도구 제공
단, react에서 useState를 import 받아와야 한다_

import { useState } from 'react';

🎨 1. useState의 사용

1.1 코드

import { useState } from 'react';
function App() {	
  	let [글제목1, a] = useState('HTML');
  	let [글제목2, b] = useState('CSS');
  	let [글제목3, c] = useState('JavaScript');  
	return (
    	<div>
      		<div>
      			<h4>{ 글제목1 }</h4>
      			<p>2023-02-14</p>
      		</div>
      		<div>
      			<h4>{ 글제목2 }</h4>
      			<p>2023-02-14</p>
      		</div>
      		<div>
      			<h4>{ 글제목3 }</h4>
      			<p>2023-02-14</p>
      		</div>     		
      	</div>
	);
}

1.2 결과

🎨 2. array 사용

2.1 코드

import { useState } from 'react';
 function App() {
 	let[글제목, a] = useState(['재택근무의 효율성', '리액트 프레임워크', 'vue3.0']);    
    return (
      <div>
        <div>
          <h4>{ 글제목[0] }</h4>
          <p>2023-02-14</p>
        </div>
		<div>
          <h4>{ 글제목[1] }</h4>
          <p>2023-02-14</p>
        </div>
		<div>
          <h4>{ 글제목[2] }</h4>
          <p>2023-02-14</p>
        </div>
      </div>
    );
 }

2.2 결과