React에서 state와 버튼 기능개발

state

※  return() 안에는 병렬로 태그 2개 이상이면 빨간줄로 에러남

return() 안에는 병렬로 태그 2개 이상 기입금지. 즉 하나의 태그로 시작해서 하나의 태그로 끝내야함

중요한 데이터는 변수말고 state에 담기

자료를 잠깐 저장할 땐 변수를 사용

 

let hungry = "배고파";
const sugar = "당이필요해";

 

하지만 일반변수 말고 state를 만들어서 데이터를 저장해 둘 수 있음

 

import { useState } from "react";

let [a, b] = useState("바지락 칼국수 먹고싶다");
let [글제목, c] = useState(["바지락 칼국수 먹고 싶다","대창 먹고 싶다","초콜릿 먹고 싶다"]);
//[]를 이용하여 array하는 방법으로 여러 내용을 넣을 수 있음
//꺼낼때는 인덱싱 방법을 사용하여 {글제목[0]}

 

맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서

useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있음

저장한 자료를 나중에 쓰고 싶으면 let [a, b] = useState('바지락 칼국수 먹고 싶다');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됨

 

이것은 destructuring 문법인데 array안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법

 

let array = ['cookie', 7];
let food = array[0];
let num = array[1];	

let [food, num] = ['cookie', 7]	//요즘은 이렇게 씀

 

그럼 각각 food = 'cookie',  num = 7 이라는 변수가 생성

등호여러번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으로 알아서 변수가 생성 됨

 

결국에 useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴 이상한 array가 남는 것

데이터1(a) 자리엔 '칼국수 먹고 싶다' 자료가 들어있고 데이터2(b) 자리엔 state변경을 도와주는 함수가 들어있음

 

- 변수 말고 state에 데이터를 저장해서 쓰는 이유와 써야하는 곳

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줌

state를 씀으로써 UI 기능 개발도 매우 편리해지고 스무스하게 동작할 수 있음

state 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것이기 때문에

state는자주 변할 것 같은 데이터들을 저장하는게 좋음

 

즉 자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓고

변경할 일이 없는 데이터들과 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장

 

※신경쓰이는 warning 지우는 법

js 파일 최상단에 /* eslint-disable */을 적어 놓으면 warning이 안뜸. eslint 끄는 기능

 

state 변경하는 법

state는 state변경함수를 써서 state를 변경해야 함(안그러면 html 재렌더링이 안됨)

state만들 때 2개까지 작명할 수 있는데(필요없으면 생략함) 두번째 작명이 state 변경을 도와주는 함수

 

state를 변경할때는 

 

state변경함수(새로운state)

 

state변경함수는 ( ) 안에 넣은걸로 state를 변경해줌

 

버튼 기능 개발

onClick

<div onClick={실행할함수}>

 

1.  Click 대문자
2. { } 중괄호 사용
3. 코드가 아니라 함수를 넣어야 잘 동작

- onClick={ } 안에 함수적기

onClick={ } 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주면 됨

함수는 그냥 긴 코드를 짧은 단어 하나로 축약해주는 문법

재사용하지 않는 함수를 사용한다면 onClick에 함수를 적을때 그 자리에 직접 만들어 집어넣음