[React] State(1)

Baoro·2022년 3월 6일
0

React

목록 보기
4/5

JavaScript에는 데이터를 저장하는 방법으로 변수를 사용했었다. 하지만 react로 넘어오면서 state라는 개념이 나타났다.
이 state는 웹이 앱처럼 동작하게 만들어준다.
이게 무슨 소리냐?
state로 만들어진 데이터가 바뀌면, 데이터를 담고있는 HTML이 새로고침없이 자동으로 재렌더링 된다. HTML이 스무스하게 변경되는 것이다.
그러면 모든 값을 다 state에 넣으면 될까?
아니다. 자주 바뀌거나, 중요한 데이터만 state에 담는다.


state 사용법

일단 state를 사용하기 전에 react에 있는 내장함수 1개를 쓴다는 의미로 useState를 import해준다.

import React, {useState} from 'react'

기본 구조

const [a,b] = useState(초기값);

예를 들어 설명해보겠다.

const [글제목,글제목변경] = useState('피자 추천');

여기서 글제목은 실질적인 데이터이고 글제목변경은 글제목을 변경해주는 함수이다.
그리고 '피자 추천'은 가장 먼저 들어있는 데이터이다.
데이터를 담았으면 출력을 해봐야겠지 않은가?
출력을 할떄는 중괄호{} 안에 데이터를 넣으면 된다.

<p> { 글제목 } </p>    //결과값 : 피자 추천

초기값에는 공백뿐만 아니라 문자,숫자,배열,객체 다 넣을 수 있다.
배열을 넣어서 다수의 데이터를 넣어보겠다.

const [글제목,글제목변경] = useState('피자 추천','치킨 추천','햄버거 추천');

이럴 때는 이렇게 데이터를 가져올 수 있다.

<p> { 글제목[0] } </p>    //결과값 : 피자 추천
<p> { 글제목[1] } </p>    //결과값 : 치킨 추천
<p> { 글제목[2] } </p>    //결과값 : 햄버거 추천
profile
꾸준히.... 깔끔하게.... 끝까지....

0개의 댓글