[React] 기초(3) - useState

useState

yarn으로 state-react 프로젝트를 새로 만든다.

yarn create react-app state-react

 

index.js에서 <React.StrictMode>제거

 

App.js

function App() {
  return (
    <div>
      app
    </div>
  );
}

---

화면의 렌더링을 하기위한 데이터 

데이터가 바뀌면 화면이 바뀐다

 

기존

 - 명령형 프로그래밍 ( 작동 순서를 모두 매번 입력해야 한다 함수를 사용하던지 )

안녕이란 글자를 하이로 바꾸고싶다 -> hellodiv를 찾아서 innerText를 '하이'로 바꾼다

 

상태를 이용하는 프로그래밍

 - 선언형 프로그래밍 ( 미리 작동 방법을 입력해두고 데이터만 변경한다 )

안녕 -> 하이 로 바꾼다

 

 

---

* 구조분해할당

const arr = [1,2];

const [one, two] = arr;

console.log(one)
console.log(two)

const obj = {
    name : "홍길동",
    age : 12
}

const {name, age} = obj;

console.log(name)
console.log(age)

배열

 - 순서가 중요하다 / 변수명은 직접 작성

객체

 - 변수명이 중요하다 / 순서는 상관없다

---

App.js

import {useState} from "react";

function App() {
    // useState 리액트에서 상태를 관리하는 함수
    // 리턴값은 배열이고
    // 배열의 첫번째 요소는 값
    // 배열의 두번째 요소는 값을 변경하는 함수
    // useState의 매개변수는 값의 초기값

    const [count, setCount] = useState(0);

  return (
    <div>
        <div>{count}</div>
        <button>+</button>
    </div>
  );
}

+ 버튼을 누르면 숫자가 올라가게 하고싶다.

function App() {
    // useState 리액트에서 상태를 관리하는 함수
    // 리턴값은 배열이고
    // 배열의 첫번째 요소는 값
    // 배열의 두번째 요소는 값을 변경하는 함수
    // useState의 매개변수는 값의 초기값

    const [count, setCount] = useState(0);
    
    const increase = () => {
        setCount(prev => prev + 1);
    }

  return (
    <div>
        <div>{count}</div>
        <button onClick={increase}>+</button>
    </div>
  );

increase 함수 추가후 버튼을 누르면 실행되게 함

숫자가 증가한다.

setCount(prev => prev + 1); 대신

setCount(count + 1); 를 사용해도 카운트가 올라가지만

const increase = () => {
    // setCount(prev => prev + 1);
    setCount(count + 1);
    setCount(count + 1);
}

 이렇게 하면 1만 올라간다.

count를 직접 바꾸면 intcrease 함수가 끝나야 count가 처리되기 때문

const increase = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
}

이렇게 한다면 숫자가 2씩 올라가게 된다.

---

검색 만들어보기

src폴더에 Item.js 생성

function Item(props) {
    return (
        <li>{props.data}</li>
    );
}

export default Item;

App.js 수정

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

function App() {

    const [searchValue, setSearchValue] = useState("");

    const changeSearchValue = (event) => {
        setSearchValue(prev => event.target.value);
    }

  return (
    <div>
        <input value={searchValue} onChange={changeSearchValue} placeholder={"검색어를 입력해주세요"}/>
        <div>{searchValue}</div>
    </div>
  );
}

export default App;

 

App.js 수정

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

function App() {

    const [searchValue, setSearchValue] = useState("");

    const gameList = ["메이플스토리", "리그오브레전드", "서든어택", "배틀그라운드"];

    const changeSearchValue = (event) => {
        setSearchValue(prev => event.target.value);
    }

  return (
    <div>
        <input value={searchValue} onChange={changeSearchValue} placeholder={"검색어를 입력해주세요"}/>
        <ul>{gameList.map((el, index) => <Item key={index} data={el} />)}</ul>
    </div>
  );
}

export default App;

코드 수정 - 필터 추가 

<ul>{gameList.filter(el => el.includes(searchValue)).map((el, index) => <Item key={index} data={el} />)}</ul>

검색어를 포함하고있는 게임만 출력된다.

 

 

 

function App() {

    const [searchValue, setSearchValue] = useState("");

    const randomNumber1 = Math.random();
    const [randomNumber2] = useState(Math.random());

    const gameList = ["메이플스토리", "리그오브레전드", "서든어택", "배틀그라운드"];

    const changeSearchValue = (event) => {
        setSearchValue(prev => event.target.value);
    }

  return (
    <div>
        <div>{randomNumber1}</div>
        <div>{randomNumber2}</div>
        <input value={searchValue} onChange={changeSearchValue} placeholder={"검색어를 입력해주세요"}/>
        <ul>{gameList.filter(el => el.includes(searchValue)).map((el, index) => <Item key={index} data={el} />)}</ul>
    </div>
  );
}

randomNumber1은 검색어를 입력할때마다 숫자가 달라지지만

randomNumber2는 검색어를 입력해도 숫자가 변하지 않는다.

* 원칙상 컴포넌트 내부 변수는 state로 만드는것이 좋다.

렌더링 될 때마다 바뀌는 변수라면
렌더링 때마다 안바뀌게 하려면 state를 사용해야하고
바뀌어도 상관 없으면 일반 변수를 사용한다.