[TIL] React State

State

💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.(쉽게 말하자면 State를 사용하는 목적은 UI를 바꾸기 위해서이다.)

State 만들기

💡 State를 만들 때는 useState()를 사용한다.

useState 훅을 사용하는 방법

const [ value, setValue ] = useState( 초기값 )

먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙입니다.

그리고 useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어줍니다.

State 변경하기

💡 state를 변경할때는 `setValue(바꾸고 싶은 값)` 를 사용한다.

state란 컴포넌트안에서 변할 수 있는 값 입니다.

(응용1) useState + onClick Event

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

button에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴

// src/App.js

import React from "react";

function App() {

  return (
    <div>
      <button>버튼</button>
    </div>
  );
}

export default App;

이 버튼을 눌렀을 때 하고 싶은 행동을 함수로 만들 수 있습니다.

아래 코드와 같이 onClickHandler 라는 함수를 만들고 onClick={} 에 넣어주었습니다.

React에서는 이러한 방식으로 함수와 컴포넌트(button 태그)를 연결시킵니다.

이 함수를 이벤트 핸들러 라고 표현합니다.

함수에 console.log("hello button"); 라는 코드를 작성하고 버튼을 누른 후 콘솔을 봅시다.

만든 함수로 인해 버튼을 누를 때 마다 콘솔에 hello 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 [name, setName] = useState("어머어머");

  function onClickHandler() {
    setName("대빵이");
  }

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

export default App;

(응용2) useState + onChange Event

1) Input과 state 구현하기

input에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴

import React, { useState } from "react";

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

  return (
    <div>
      <input type="text" />
    </div>
  );
};

export default App; 

input과 useState를 사용해서 input의 값을 넣을 value라는 state를 생성했습니다.

이번에는 function keyword를 사용하지 않고 화살표 함수를 사용했습니다.

💡 화살표 함수, function 키워드 모두 똑같이 함수 컴포넌트를 만들 수 있습니다. 

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

input과 생성한 state(value)를 연결해볼게요.

먼저 input에 onChange라는 이벤트를 불러내고, 우리가 생성한 이벤트 핸들러 함수를 넣습니다.

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;

그리고 우리는 이벤트 핸들러 안에서 자바스크립트의 event 객체를 꺼내 사용할 수 있습니다.

사용자가 입력한 input의 값은 event.target.value 로 꺼내 사용할 수 있습니다.

마지막으로 state인 value를 input의 attribute인 value에 넣어주면 input과 state 연결하기, 끝 입니다!

결론

React강의를 들으면서 JavaScirpt랑은 비슷하면서 다른 느낌을 받았닷..!!

React의 제일 중요한 부분이여서 프로젝트들 시작하다보면 더 익숙해 질 수 있게 많이 연습해봐야할 거 같다.

제일 중요한 기본 틀!!

const [state, setState] = useState(초기값 | 배열도 가능하다)

React공식 홈페이지