본문 바로가기
React/개념

[React] CH03. state에 중요한 데이터 저장

by MINNI_ 2021. 9. 9.

1. state 개념

  • 정의
    - 변수 대신 쓰는 데이터 저장 공간
  • 데이터 저장하는 방법
    1) 변수에 저장
    2) state에 저장

2. state에 데이터 저장하는 방법

  • 1) { useState } 상단에 첨부(import)
import { useState } from 'react';
  • 2) useState(데이터) 이용하여 만듦
    • [state 데이터, state 데이터 변경 함수]  ⇒ 2개의 데이터가 담긴 배열 생성됨 
    • useState('남자 코트 추천') = [a, b]
      - a : '남자코드 추천'   b : 남자 코드 추천 state 정정해주는 함수
let [글제목, 글제목변경] = useState('남자 코트 추천');
  • 3) useState(데이터) 사용
    - 문자, 숫자, array, object 다 저장 가능
<h3>{ 글제목 }</h3>
# useState()에 배열 저장 가능
let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']);
<h3>{ 글제목[1] }</h3>	// 강남 우동 맛집 출력

3. state 저장하는 이유

  • 웹이 App처럼 동작하게 만들고 싶을 때
    - 자주 바뀌는 중요한 데이터는 state로 저장!!
state 변수
  • 데이터 변경 시, HTML이 자동으로 재랜더링 함
  • 새로고침 없이 스무스하게 동작
  • 데이터 변경 시, 자동으로 재랜데링 불가
  • 새로 고침되어야 재랜더링 됨

[ 참고 ]

 

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

 

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

  누구나 마음 한켠엔 나만의 웹서비스를 만들고 싶어합니다. 프론트엔드는 어찌저찌 하겠는데 서버 만드는게 어렵고 귀찮다고요? 그렇다면 Firebase를 쓰십시오.   구글이 웹서버를 대신 만들어

online.codingapple.com

 

댓글