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

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 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌