State 사용법

Tae_Tae·2024년 5월 20일
React

React

목록 보기
2/14

코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.

강의 내용 출처는

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

모든 저작권은 코딩애플에게 있습니다.

중요한 data는 state에

let post = "" 이렇게 변수를 저장했는데
리엑트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다.

예시 코드로 확인해보면

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

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

맨 윗줄에 import {useState} from 'react' 라고 적으면
원하는 곳에 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다.

그리고 저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState(' 저장한 자료 ');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 된다.
b 자리는 state 변경을 도와주는 state 변경함수
(b를 써야 state 변경이 가능하다.)

destructuring 문법

let [a,b]에서 "[a,b]" 는
자바스크립트 destructuring 문법인데
array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을때 사용하는 문법이다.

예를 들어 ['Kim', 20]; 이렇게 생긴 array자료에서
Kim과 20을 각각 변수에 저장하고 싶으면

let array = ['Kim', 20];
let name = array[0];
let age = array[1];
// 이렇게 해도되는데

let [name, age] = ['Kim', 20]
// 요즘은 이렇게 한다.

그러면 각각 name = 'Kim', age = 20 이라는 변수가 생성되고
등호를 여러번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 변수가 생성된다.

이게 변수만들 때 쓰는 destructuring 문법이다.

destructuring (구조 분해 할당)

: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

ary = [1,2]가 있다고 하면

ary[0], ary[1]로 array자료의 element를 선택하여 사용해도 되지만

let [a, b] = [1, 2];
또는
let [a, b] = ary

이렇게 ary를 분해해서 ary자료를 편하게 이용할 수 있다.

구조 분해 할당

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

title이라고 a의 이름을 만들어주면 조금 더 직관적이다.

이제 글제목 부분에
{ title }을 넣어주면 '남자 코트 추천'이 출력된다.

결론 : 리액트에선 일반 변수대신 state 이용해도 자료를 잠깐 저장해둘 수 있다.

변수 대신 state에 데이터 저장해서 사용하는 이유

state는 변동사항이 생기면 state를 쓰는 html도 자동으로
재랜더링 해준다.

예시로 확인해보면

function App(){
  let post = '강남 우동 맛집'

  return (
    <h4>{ post }</h4>
  )
}

post에 있던 변수를 '강남 우동 맛집' -> '강남 고기 맛집' 이렇게 변경한 경우
그 변경사항 html에 반영되게 하고 싶으면
js에선 getElementBy... 이렇게 길게 적어야 하지만

이렇게 state로 만들어두면

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

  return (
    <h4>{ 글제목 }</h4>
  )
}

데이터 바인딩이라고 하는데

데이터 바인딩

: 소프트웨어 개발에서 사용자 인터페이스(UI) 요소와 데이터 모델을 연결하여 데이터의 변경이 자동으로 UI에 반영되도록 하는 기술

state에 있던 '남자 코트 추천' -> '여자 코트 추천' 이렇게 바꾸고 그 변경사항도 html에 반영되게 하고 싶으면 아무것도 입력하지 않아도 자동으로 변경된다.

state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줘서 그럼

State 활용

좋아요 버튼을 누르면 숫자가 올라가는 버튼을 만들어보자

<h4> { 글제목[0] } <span>👍</span> 0 </h4>

0이라고 하드코딩 해놓은 부분을 누르면 숫자가 1씩 증가하여야한다.

바뀐다 -> state 활용 ?

state로 변경하면

function App(){
let [따봉] = useState(0);
return (
  <h4> { 글제목[0] } <span>👍</span> {따봉} </h4>
		)
}

일단 숫자를 state 변경하고
그러면 클릭하면 숫자가 늘어나야한다 부분을 구현해야하는데
onClick event 사용하면 될 것 같다.

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

리엑트에서는 onclick이

  • Click이 대문자인거

  • {} 중괄호 사용하는거

  • 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거

위 3가지를 기억하자

function App(){
  
  function 함수임(){
    console.log(1)
  }
  return (
     <div onClick={함수임}> 안녕하세요 </div>
  )
}
// 이렇게 만드는 방법도 있고

<div onClick={ () => { 실행할코드 } }>
// 이렇게 만드는 방법도 있다.

함수가 재사용이 안될 것 같으면 arrow function으로 선언해도 된다.

state 변경 (중요)

state는 state 변경함수를 써서 state를 변경해야한다.
(안그러면 html 재랜더링 안된다.)

let [ 따봉, 따봉변경 ] = useState(0);

아까 다룬 [a,b]에서 b가 state 변경함수라고 했는데

state 변경 함수의 사용법은

따봉변경(새로운state);

state변경함수는 ( )안에 들어있는 내용으로 state를 변경해주는 함수이다.

따봉변경(1)이라고 하면 따봉이라는 state는 0에서 1로 변경된다.

따봉변경(따봉 = 따봉 + 1);

이렇게 작성하면 안되고 깔끔하게 새 state만 넣어야한다.

그러면 따봉 눌렀을때 숫자가 1씩 올라가게 하려면

function App(){
let [따봉, 따봉변경] = useState(0);
return (
  <h4> { 글제목[0] }
   <span onClick = { () => { 따봉변경(따봉+1) }}>
     👍</span> {따봉} </h4>
		)
}

이렇게 작성하면 된다.

정리

- Jsx에서 클릭 이벤트를 만들고 싶으면 onClick={함수} 이렇게

- state 변경하고싶으면 state 변경함수를 꼭 이용하기
state변경함수 ( 변경하고싶은 내용)

profile
Tae_Tae
이전 포스트

시리즈 썸네일

다음 포스트

array, object state 변경하는 법

0개의 댓글