[React] state 사용

· State를 사용하는 이유

 

기존 html에서는 정적 변수를 선언할 떄 var, const, let 을 사용했다.

하지만 위 자료형들로 선언된 변수들은 값이 변해도 실시간으로 html에 적용되지 않았는데

state를 사용하면 변한 값들이 html에 실시간으로 재랜더링이 되어 적용되기 때문에 부드러운 UI 구축이 가능해진다.

 

<State 만드는 법>

1. fuction App() 함수 위에 userState를 import

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

function App() {
	...
}

export default App;

 

2. function App() 메소드 내부에 upState() 선언

let [state, setState] = useState(초기값);

state 자리에 작성한 state 명을 가지고 후에 자유롭게 사용이 가능하다.

setState에 들어가는 변수는 나중에 state값을 변경하는 함수에 쓰일 수 있는데

필요없다면 사용하지 않아도 된다.

 

사용 예시

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

function App() {

  let post = '강남 우동 맛집';
  let [글제목,b] = useState('남자 코트 추천');
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4 id>블로그임</h4>
      </div>
      
      <div className="list">
        <h4>{글제목}</h4>
        <p>2월 17일 발행</p>
      </div>
      
      <h4 style={{color : 'red', fontSize : '30px'}}>{post}</h4>
    </div>
  );
}

export default App;

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

<h4>{글제목}</h4>

위처럼 state 값을 사용할 수 있다.

 

let [state,b] = useState('Hi','안녕하세요','채로입니다');

<h4>{state[0]}</h4>
<h4>{state[1]}</h4>
<h4>{state[2]}</h4>

배열 형식으로도 사용할 수 있다.

 

데이터를 state로 만드는 경우

• 값이 자주 바뀌면서 화면에 띄워줘야하는 데이터
• 상품명, 글제목, 가격 등 자주 변할 것 같은 데이터
• 로고와 같이 자주 바뀌지 않는 데이터들은 굳이 state로 저장할 필요가 없음

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌