[React] State

1. State란?

• 유동적인 데이터를 다루기 위해 사용한다.
• 계속해서 변하는 특정 상태를 말한다.
• 기존 방식처럼, 변수를 선언하는 방식 안쓰는 이유는?
  -> state는 데이터가 변경될 때, 재렌더링 되기 때문에 리액트에서는 변수를 재선언하지 않고 state를 사용한다.

2. Vanilla JS React State

export default function FuncState {
	function isEng() {
		const content = document.querySelector(.state div);
        content.innerText = "apple";
    }
    return (
    <>
    	<div>사과</div>
        <button onClick={() => {isEng();}}>영어로 바꾸기</button>
    </>
    );
} 

• JS는 상태가 변하는 코드를 작성할 때, 변수 선언하는 방식을 쓴다.

3. 함수형 컴포넌트 State

• useState를 import하여 사용한다. (useState : 리액트에서 제공하는 Hook)
• 리액트 공식홈페이지에서도 함수형 컴포넌트 사용을 권장하고 있다. (간단하고 자주씀!)
• useState는 setter 함수를 배열로 제공하므로 사용 시 바로 구조분해할당하여 사용한다.
• const [state 변수명, state를 변경시키는 setter함수] = useState(state초기값)의 형태로 작성한다.

1) useState 사용

한글->영어로 바꾸기

• 버튼을 누르면 값을 변하게 하는 로직을 작성해보자!
  

import {useState} from "react";

export default function FunState() {
	const [apple, setApple] = useState("사과");
	
    retrun (
    	<>
        	<h2>useState 사용하기</h2>
            <button onClick={()=> {setApple("apple")}}>영어로 변경</button>
        	<div>{apple}</div>
        </>
    );
}

+1 버튼 만들기

export default function FunState () {
	const [number, setNumber] = useState(0);
    
    return (
    	<>
        	<h2>use State사용<h2>
            <button onClick={() => {
            	setNumber((prevNum)=> {
                	alert(prevNum+1);
                    return prevNum+1;
                });
            }}> 
            +1 버튼
            </button>
        </>
    );
}

사과->apple->사과 ...

export default function FunState() {
	const [showEng, setShowEng] = useState("사과");

	return (
    	<>
        	<button onClick={() => {setShowEng(!showEng);}}>{showEng ? "한글" : "영어"}로 변경</button>
            <div>{showEng === "사과" ? "apple" : "사과"}</div>
        </>
    );
}

4. 클래스형 컴포넌트 State

• React가 제공하는 Component 클래스 상속받아 사용
• super와 constructor 사용해 기존 클래스 상속받는 것이 원칙이지만 state로 코드를 최소화 할 수 있다.
  

1) state 사용

import { Component } from "react";
export default class ClassState extends Component {
	// * 현재 클래스형 컴포넌트에서 state를 사용하는 방법
  state = {
    banana: "바나나",
    // banana라는 state를 선언. 해당 state의 값으로 "바나나"를 저장
  	};
  
  render() {
    const { banana } = this.state;
    // this.state에 있는 값인 banana를 추출해서 새로운 상수값을 만든다.
    // 구조 분해 할당 사용할때, 객체안에 실제로 존재하는 이름을 사용해야 한다.
    return (
      <>
        <h2>클래스형 컴포넌트에서 state 사용하기</h2>
        <button onClick={() => this.setState({ banana: "banana" })}>
          영어로 변경
        </button>
        <div>{banana}</div>
      </>
    );
  }
}

2) 실습

import React from "react";
import { useState } from "react";
import CharactorInfo from "./CharactorInfo";

export default function CharactorContainer() {
  
  // characters -> 배열. 각 요소들은 객체
  //               사용자의 데이터가 담긴 객체의 배열
  const [characters, setCharacters] = useState([
    {
      id: 1,
      name: "뽀로로",
      age: "7",
      nickName: "사고뭉치",
    },
    {
      id: 2,
      name: "루피",
      age: "5",
      nickName: "공주님",
    },
    {
      id: 3,
      name: "크롱",
      age: "4",
      nickName: "장난꾸러기",
    },
  ]);
  
// 사용자가 선택한 값 
  const [selectedCharactor, setselectedCharactor] = useState(null);
  
  const handleClick = (name) => {

    // find : 배열을 순회하여 주어진 조건에 맞는 첫번째 요소를 반환
    const selected = characters.find((c) => c.name === name);

    setselectedCharactor(selected);
  };
 

  return (
    <div>
      <h2>실습 3 -뽀로로,루피,크롱</h2>

      {characters.map((c) => (

        <button key={c.id} onClick={() => handleClick(c.name)}>
          {c.name}
        </button>
      ))}

      {selectedCharactor && <CharactorInfo charactorData={selectedCharactor} />}
    </div>
  );
}

• 만약 selectedCharactor가 true면 렌더링되어 CharactorInfo가 나타나게 된다.

// CharactorContainer에서 전달받은 props를 출력한다.
export default function CharactorInfo ({charactorData}) {
return (
	<>
    	<div>Name: {charactorData.name}</div>
        <div>Age: {charactorData.age}</div>
       <div>NickName: {charactorData.nickName}</div>        
    </>
 );
}