어떻게 하면 React.js에서 값이 바뀔 데이터를 담아줄 수 있을까?

useState()를 활용하면 React.JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있다.

useState()

 

코드 예시

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App(){
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
               setCounter(counter + 1);
            }
            return (
                <div>
                    <h3>Total clicks: {counter} </h3>
                    <button onClick = {onClick}>Click me</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>

const data = React.useState();를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타난다.

undefined는 data이고 f는 data를 바꿀 때 사용하는 함수이다.

 

React.useState() 함수는 초기값을 설정할 수 있다. 즉, undefined -> 초기값 , f -> 그 값을 바꾸는 함수이다.

 

 

React.useState() 배열에서

보통 데이터에는 counter처럼 원하는대로 붙이고 f는 set 뒤에 데이터 이름을 붙인다.(setCounter)

어떤값을 부여하든 setCounter 함수는 그 값으로 업데이트하고 리렌더링을 한다.

 

1. 먼저 counter라는 데이터를 받는다. 바로 return()에 그 데이터를 담고 있다.(return은 사용자가 보게될 컴포넌트)

2. 버튼이 클릭되면 counter값을 바꿔줄 함수인 setCounter를 호출한다.

3. counter의 새로운 값(setCounter(counter + 1)에 써준 counter + 1)을 가지고 counter 함수를 호출한다. 

 

 

React.js는  '실제로 바뀌는 값'만 판단해서 불필요한 리렌더링을 제외한 채로 동작한다.

할당

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App(){
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
               //setCounter(counter + 1);
               setCounter((current) => current + 1);
            };
            return (
                <div>
                    <h3>Total clicks: {counter} </h3>
                    <button onClick = {onClick}>Click me</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>
  1. 직접 할당 :setState(state +1)
  2. 함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다)

현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1)을 쓰고,

현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)을 쓰면 된다.

onChange

(chatGPT의 답변을 참고하였다.)

 

onChange는 React에서 주로 폼 요소나 입력 필드의 값이 변경될 때 발생하는 이벤트 핸들러이다.

이벤트 핸들러는 사용자가 입력을 하거나 선택할 때 호출되며,

이를 통해 사용자 입력에 대한 반응적인 동작을 구현할 수 있다.

 

onChange 이벤트는 주로 다음과 같은 상황에서 사용된다:

  1. 입력 필드 값 변경 감지: 텍스트 입력, 체크박스, 라디오 버튼 등 입력 필드의 값이 변경될 때마다 onChange 이벤트가 발생합니다.
  2. 폼 데이터 업데이트: 사용자가 입력을 변경하면 onChange 이벤트 핸들러 내부에서 해당 입력 값을 상태(state)에 업데이트하거나 컴포넌트 내의 다른 데이터와 연동할 수 있습니다.
  3. 실시간 검색, 필터링: 사용자가 검색어를 입력할 때마다 onChange 이벤트를 사용하여 실시간으로 검색 결과를 업데이트할 수 있습니다.

 

코드 예시

import React, { useState } from 'react';

function InputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value); // 입력 값 업데이트
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange} // 입력 값 변경 시 호출되는 핸들러
      />
      <p>Current value: {inputValue}</p>
    </div>
  );
}

위 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의에서 알려준 내용 중 일부를 포함하고 있습니다.

React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다.

(밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.)

https://nomadcoders.co/react-for-beginners

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

 

저작자표시 비영리 변경금지 (새창열림)

'Frontend > React' 카테고리의 다른 글

[React] useEffect()에 대해서  (1) 2023.08.17
[React] Props에 대해서  (1) 2023.08.17
[React] createElement, ReactDOM, JSX에 대해서  (0) 2023.08.17
[React] npx create-react-app이 잘 실행되지 않는다면?(NPM 레지스트리 URL 에러)  (0) 2023.08.11
[React] React를 활용하여 시간/분 , 킬로미터/마일 변환기 만들기  (1) 2023.08.01

티스토리툴바