React 리액트 - 상태(state)

 

 

State

 

 

리액트에서는 상태를 바꾸어 주어야 한다

 

V.D > State > View

 

리액트에서는 위와 같은 흐름으로 동작하기 때문에

V.D에서 View에 반영되는 부분을 바꾸고 싶다면

State(상태)를 바꾸어야 한다

 

 

setCount

 

 

: 숫자가 하나씩 늘어나거나 줄어들게 동작하는 버튼 만들기

 

기존에 아래와 같이 JS에서 사용하던 방식은 사용이 어려움

1. selector -> DOM API

2. addEventListener

3. +=, -=

 

리액트에서는 기존에 사용하던 dom은 eventListner를 사용할 수 없다

 

따라서 핸들러를 사용한다

<div onClick={handleClick} / >

이런 코드가 수천 개 있어도 실제 DOM에는 클릭 이벤트가 딱 한 번만 등록됨 (delegation 방식).

- 리액트가 이벤트 바인딩을 최적화해줌

- 리액트는 내부적으로 최상단에 이벤트를 한 번만 등록해놓고 각 요소에 대해 효율적으로 이벤트를 처리함

 

상태를 바꾸는 React의 Hook 함수 const [number, setNumber] = useState("초기값")

 

 

const Count = () => {

  const [number, setNumber] = useState(0)

  console.log("number", number)
  console.log("setNumber", setNumber)

  const decrease = () => {setNumber(number - 1)}
  const increase = () => {setNumber(number + 1)}

  return (
    <div>
      <button id="subtract" onClick={decrease}>-1</button>
      {number}
      <button id="sum" onClick={increase}>+1</button>
    </div>
  );
};

export default Count;

 

 

<결과화면>

 

 

<로그>

 

 

setSound

 

 

const Sound = () => {

  // 강아지 버튼을 누르면 멍멍
  // 고양이 버튼을 누르면 냐옹

  const [sound, setSound] = useState("")

  const catSound = () => {setSound("meow")}
  const dogSound = () => {setSound("bowwow")}

  return (
    <div>
      <button onClick={catSound}> kitty kitty 🐈‍⬛ </button>
      {sound}
      <button onClick={dogSound}> doggie doggie 🐕 </button>
    </div>
  );
};

export default Sound;

 

 

<결과화면>

 

고양이를 눌렀을 때 야옹

강아지를 눌렀을 때 멍멍 출력됨

 

 

setName

 

 

사용자가 입력한 이름을 화면에 출력하기

 

 

const Name = () => {

  const [name, setName] = useState("")
  const onChangeName = (e) => {setName(e.target.value)}

  return (
    <div>
      <h2>
      {name}
      </h2>
      <input type="text" onChange={onChangeName} />
    </div>
  );
};

export default Name;

 

 

<결과화면>

 

 

setColor

 

 

사용자가 입력창에 특정 색상을 입력하는 경우 해당 색상을 출력해 색상을 변경한다 blue, pink, orange 세팅

 

 

화면이 바뀌어야 한다

-> state(상태)가 바뀌어야 한다

-> 동일하게 onChange 태그 사용

 

색상이 바뀌어야 하니 style 태그 적용

입력하는 색상에 따라 바뀌어야 하므로 if else 조건문 사용

-> JS 코드를 그대로 사용해 응용하는 것이다

 

 

const Colors = () => {

  const [result, setResult] = useState("")
  const [color, setColor] = useState("")

  const onChangeResult = (e) => {
    let value = e.target.value

    setResult(value)

    if(value === "blue"){
      setColor('blue')
    }else if(value === "pink"){
      setColor('pink')
    }else if(value === "orange"){
      setColor('orange')
    }else{
      setColor('black')
    }
  }

  return (
    <div>
      <h1 style={{color}}>
        {result}
      </h1>
      <input type="text" onChange={onChangeResult}/>
      
    </div>
  );
};

export default Colors;

 

 

 

<결과화면>

 

 

 

setHobby

 

 

사용자에게 취미를 입력받고 화면에 실시간으로 출력한다 취미가 축구라면 글자 크기를 50px로 바꾼다 취미가 농구라면 글자 색상을 blue로 바꾼다 그 외에는 글자 크기는 30, 색상은 pink로 바꾼다

 

 

const Hobby = () => {

  const [hobby, setHobby] = useState("")
  const [style, setStyle] = useState({
      fontSize: "",
      color: ""
    })

  // state 네이밍 규칙
  // handle[Value]Change

  const handleHobbyChange = (e) => {
    const newHobby = e.target.value;
    setHobby(newHobby)

    if(newHobby === "football"){
      setStyle({fontSize: "50px"})
    }else if(newHobby === "basketball"){
      setStyle({color: "blue"})
    }else{
      setStyle({
        fontSize: "30px",
        color: "pink"
      })
    }
  }

  return (
    <div style={style}>
      <input
        type="text" 
        onChange={handleHobbyChange} 
        placeholder='취미를 입력하세요' />
      <h1>
        {hobby}
      </h1>
    </div>
  );
};

export default Hobby;

 

 

 

<결과화면>

 

 

setPerson

 

 

사용자가 이름을 입력했다면 name의 컬러를 blue로 변경 사용자가 나이를 입력했다면 age의 폰트 사이즈를 50px로 변경

 

 

import React, { useState } from 'react';

const Person = () => {
  
  const [info, setInfo] = useState({
    name : "",
    age : 0
  })

  const [styleName, setStyleName] = useState({color : ""})
  const [styleAge, setStyleAge] = useState({fontSize : ""})

  // 사용자가 입력한 값을 들고와서 확인
  const [target, setTarget] = useState("")

  const handleInfoChange = (e) => {
    setTarget(e.target.value)
  }

  const handleInfoKeyDown = (e) => {
    const isNum = target -0
    if(isNum){
      setInfo({...info, age : target})
      setStyleAge({fontSize : "50px"})
      setStyleName({color : ""}) // 다른 값을 입력하는 동안 기존의 입력값은 효과를 초기화함
    }else{
      setInfo({...info, name : target})
      setStyleName({color : "blue"})
      setStyleAge({fontSize : ""}) // 다른 값을 입력하는 동안 기존의 입력값은 효과를 초기화함
    }

    if(e.key === 'Enter'){
    }
  }

  return (
    <div>
      <input 
        type="text" onChange={handleInfoChange} placeholder='사용자 정보를 입력하세요'
        onKeyDown={handleInfoKeyDown}/>
      <h3 style={styleName}>이름: {info.name}</h3>
      <h3 style={styleAge}>나이: {info.age}</h3>
    </div>
  );
};

export default Person;

 

 

- 세터는 여러 번 여러 개 사용 가능하다

- js에서는 문자열로 입식된 값에 마이너스[-] 부호 연산을 하면 숫자가 된다

-> 따라서 isNum으로 target-0 계산을 통해 숫자값인지를 확인 

-> 문자값에 -0을 할 경우 NaN이 떠서 false가 됨

따라서 if(isNum){}else{} 조건문으로 isNum이 true값일 때는 숫자값인 경우를 처리하면 됨

else의 경우 문자값이 되므로 문자값을 처리한다

 

* 다만 이 방법을 사용할 경우 0을 숫자로 인식하지 못하기 때문에

!=NaN(target)의 방식을 사용하는 것이 더욱 확실함

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code