State

: 컴포넌트 내부에서 바뀔 수 있는 값! (리액트 안에서 변경되어야 하는 값은 반드시 state로 선언)

왜? UI를 바꾸기 위해서

 

State를 만들기

useState() : '훅' (리액트에만 존재하는 개념이자 기능)

import React, { useState } from 'react';

function PororoFriends() {
  const [name, setName] = useState("루피"); // 이것이 state!
  return <Second PororoFriends={name} />;
}

// .. 중략

useState 훅을 사용하는 방식

const [ value, setValue ] = useState( 초기값 ) => ( ' ' )가능   // 구조분해할당 

const [name, setName] = useState("루피")

name이라는 state 만들었고, name state의 처음값(initial state : 언제든지 변할 수 있는 값이기 때문에 존재)은 “루피”

 

State 변경하기

🌞onClick

setValue(바꾸고 싶은 값)를 사용 ( 아래에서는 setName )

import React, { useState } from "react";

function Third(props) {
  return (
    <div>
      <button
        onClick={() => {   // 여기에서 setName()을 실행
          props.setName("뽀로로");    // 드디어 받은 setName을 실행
        }}
      >
        루피 이름 바꾸기
      </button>
      <div>{props.PororoFriendsName}</div>
    </div>
  );
}

function Second(props) {
  return (
    <Third PororoFriendsName={props.PororoFriendsName} setName={props.setName} /> // 받아서 다시 주고
  );
}

function First() {
  const [name, setName] = useState("루피");
  return <Second PororoFriendsName={name} setName={setName} />; // 주고
}

function App() {
  return <First />;
}

export default App;

 

 

 

setName을 통해서 바꾼 값은 어디에 저장x => 단순히 화면에서만 바뀐 값으로 다시 렌더링(새로고침 시 초기값 나옴)

 

🌞useState + onClick Event

(1) Button과 이벤트 핸들러 구현하기

onClickHandler 라는 함수를 만들고 onClick={} 에 넣어주었다. React에서는 이러한 방식으로 함수와 컴포넌트(button 태그)를 연결. 이 함수를 이벤트 핸들러 라고 표현.

import React from "react";

function App() {
  // 버튼을 눌렀을 때 하고 싶은 행동 
  function onClickHandler() {
    console.log("hello button");
  }
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

(2) state 구현하고 이벤트 핸들러와 연결하기

state를 하나 만들고, 이 버튼을 클릭을 했을 때 state 값을 바꾼다.

이벤트 핸들러를 만들어주고 그 안에 setName 을 넣어줍니다.

이제 우리가 버튼을 누르면 setName()안에 있는 값이 “체리”이니까, state가 “사과"에서 “체리”로 바뀐다.

import React, { useState } from "react";

function App() {
  const [fruit, setFruit] = useState("사과");

  function onClickHandler() {
    setFruit("체리");
  }

  return (
    <div>
      {fruit}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

 

🌝 useState + onChange + Event

(1) Input과 state 구현하기

(2) 이벤트핸들러를 구현하고 state와 연결하기

이벤트 핸들러 안에서 자바스크립트의 event 객체를 꺼내 사용할 수 있다. 사용자가 입력한 input의 값은 event.target.value 로 꺼내 사용할 수 있다. 마지막으로 state인 value를 input의 attribute인 value에 넣어주면 input과 state 연결하기, 끝

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

	console.log(value) // value가 어떻게 변하는지 한번 콘솔로 볼까요?

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

다시 설명하면 사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때마다, 같은 말로 onChange될 때마다 value라는 state에 setValue해서 넣어주는 것 이다.

 

import React, { useState } from "react";

const App = () => {
  const [fruit, setFruit] = useState("");

  return (
    <div>
    	과일 : {" "}
      <input 
      	value={fruit} 
     	 onChange={function (event) {
      		setFruit(event.targer.value)   
            // console.log('event', event.target.value)
      }} 
      />
     <br></br>
     {fruit}
    </div>
  );
};

export default App;

이벤트 핸들러 안에서 자바스크립트의 event 객체를 꺼내 사용할 수 있다

Event 객체 안에 있는 target 객체안에 value라는 값으로 우리가 타이핑 하는 것들이 들어온다. 매개변수로!

=> input의 값은 event.target.value

state인 value를 input의 attribute인 value에 넣어주면 input과 state 연결하기

 

사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때마다,

같은 말로 onChange될 때마다 value라는 state에 setValue해서 넣어주는 것