[React.js] state

컴포넌트 내에서 값이 변하

---

1. state 란?

기존의 자바스크립트에서

기존의 자바스크립트에서는 화면의 특정 값을 변하게 하려면 단순히 해당 변수의 값을 변경시키면 됐다. count의 값을 버튼을 클릭할 때마다 1씩 올리고 화면에 보이게 하기 위해서 기존 자바스크립트에서 방법으로 코드를 작성한 결과↓

count 콘솔

리액트에서는 아무리 버튼을 클릭해도 화면에 실시간으로 값이 변하지 않는 것을 볼 수 있다. 그렇다고해서 count 변수의 값이 변하지 않고 있지 않다는 것을 console 창에서 확인할 수 있다. 그렇다면 count의 값은 정상적으로 변하는데 화면에 변한 값을 출력하고 싶으면 어떠한 방법을 사용해야 할까?  바로 state를 사용하는 것이다. 

state 설명

state는 컴포넌트 내부에서 사용하는 데이터를 변경할 때 사용하는 것이다. 일반 변수는 값이 변화해도 화면에 보이지 않지만, state를 사용해서 변화를 감지한 후 화면에 변경된 값을 보여줄 수 있다. 

기존 DOM에서는 새로운 데이터가 업데이트되면 렌더링 과정이 처음부터 다시 실행되서 성능이 저하되는 현상이 있다.

하지만 React에서 state에 값이 변화되는 것이 감지되면 React는 가상의 DOM을 만들어낸다.

가상의 DOM, Virtual DOM을 만들어서 기존 UI에 Virtual DOM을 리렌더링한다. 바뀐 부분이 있는지 전에 DOM에 있던 내용과 현재 Virtual DOM이 있는 상태와 비교해서 바뀐 부분만 실제 DOM에 적용해서 화면에 출력한다. 바뀐 부분만 렌더링 하기 때문에 기존의 리렌더링 방식보다 성능이 좋다.

 // state 생성
 const [count2, setCount2] = useState(0)
 // const [컴포넌트에서 사용할 변수, set] = useState(초기값)

state를 정의하는 방법이다. 비구조화 할당 방법으로 정의한다. count2가 변수이름이고 setCount2가 count2 변수의 값을 변경할 때 사용하는 함수이다. useState( )의 소괄호 안에 들어가는 값이 count2가 처음에 갖는 초기값이다.

그리고 state를 사용하기 위해서 react에서 useState를 불러와야 한다.

import { useState } from 'react';

 

  const handleClick2 = () => {
    // state 변경하는 방법
    setCount2(count2 + 1) // 화면에 렌더링이 다 끝난 후에 변경된 값이 화면에 출력된다
    console.log(count2);
    // state는 무조건 setState를 사용해서만
    // 변경할 수 있다.
    
  }

  return (
    <div className="App">
      <p>변수 : {count}</p>
      <p>state : {count2}</p>
      <button onClick={handleClick}>클릭</button>
      <button onClick={handleClick2}>클릭</button>
    </div>
  );

state로 count2 값 변경

이런식으로 count2를 표현식으로 사용해서 버튼을 클릭하면 1씩 증가하도록 만들었다. setCount2로 count2의 값을 변경시켰다.  여기서 이상한 점이 있다. count2를 콘솔로 출력했을 때 화면에서는 2인데 콘솔로는 1이 나온다. 이것은 state의 순서? 원리를 알아야 한다. state는 화면의 렌더링이 다 끝난 후에 변경된 값이 화면에 출력되는 것이다. state는 값 변경 해줘~로 요청 하는 느낌이다.

2. 좋아요 기능 실습

import React from 'react'
import imgSrc from './img/moon.jpg'
import Like from './components/Like'

/*

    실습문제 1) 좋아요 기능을 가진 페이지 구현
    STEP1) 빈 하트를 클릭 시, 꽉찬 하트로 만들어주기 ❤
    STEP2) 빈 하트를 클릭 시, 좋아요 1개로 변경해주기!
    STEP3) 좋아요가 눌린 상태에서 다시 클릭 시, 되돌리기

*/

const Ex01 = () => {
  return (
    <div>
        <img src={imgSrc}></img>
        <Like/>
    </div>
  )
}

export default Ex01

Like 컴포넌트를 만들어서 해당 컴포넌트 안에서 하트를 누르면 0이 1로 변하고 활성화된 하트를 다시 누르면 하트의 활성화가 풀리고 1이 0으로 변하게 할 것이다.

 

// Like.jsx
import React, { useState } from 'react'

const Like = () => {

    const [heart, setHeart] = useState("🤍")
    const [count, setCount] = useState(0)

    const handleLike = () => {
      if (heart === "🤍"){
        setHeart("❤")
        setCount(count + 1)
      }
      else if (heart === "❤") {
        setHeart("🤍")
        setCount(count - 1)
      }
    }
   
  return (
    <div>
        <span onClick={handleLike}>{heart} 좋아요</span><span> {count}개</span>
    </div>
  )
}

export default Like

하트와 좋아요 수가 변경되는 데이터이기 때문에 둘 다 state를 사용해서 값을 변경하게 해준다. 빈 하트를 클릭했을 때 꽉 찬 하트로 변하고 좋아요가 1 추가된다. 좋아요 취소기능인 꽉 찬 하트를 클릭했을 때 빈 하트가 되며 좋아요 수가 1 감소하게 조건문을 작성했다.

좋아요 X

좋아요 O