WebProgramming/React

[React] useState로 input 상태 관리하기

2022. 7. 7. 19:53
목차
  1. 1-1) text상태 관리하기 (input이 1개일 경우)
  2. 1-2) text상태 관리하기 (input이 2개 이상일 경우)
  3. 2. checkbox 상태 관리하기
  4. 3-1) input요소에 focus시켜주기 ; autoFocus
  5. 3-2)input요소에 focus시켜주기 ; useRef

이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요!

let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다.

useState로 선언한 state를 setState함수를 통해 값을 변경하면 다시 렌더링하여 반영된 값을 화면에 출력해줍니다.

useState()의 인수로 state의 초기값을 주며, 배열로 state와 setState함수를 받습니다.

1-1) text상태 관리하기 (input이 1개일 경우)

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onReset = () => {
    setText("");
  };
  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
};

export default App;

 

1-2) text상태 관리하기 (input이 2개 이상일 경우)

input이 여러 개일 경우, useState와 onChange를 여러번 사용해서도 구현할 수 있지만 가장 좋은 방법은 아닙니다.

더 좋은 방법은 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것입니다.

그리고 useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 합니다.

1개일 때는 그냥 setState(e.target.value)를 하였지만, 2개 이상일 때는 useState를 객체로 저장하였기에 useState({[e.target.name] : e.target.value})를 해주어야합니다. 

export default App;

const [inputs,setInputs] = useState({
  author:"",
  content:"",
  emotion:1,
})
const handleChange = (e) => {
	setInputs({
    ...inputs, // 기존의 input 객체를 복사한 뒤 
    [e.target.name] : e.target.value, // name키를 가진 값을 value로 설정
  })
}
<input
  name="author"
  value={inputs.author}
  onChange={handleChange}
/>

 

 

2. checkbox 상태 관리하기

import React, { useState } from "react";
import Header from "../../components/Header";

const SignUpPrivacy = () => {
  const list = [
    {
      id: 0,
      data: "네이버 이용약관, 개인정보 수집 및 이용, 위치기반서비스 이용약관(선택),프로모션 정보 수신(선택)에 모두 동의합니다.",
    },
    { id: 1, data: "네이버 이용약관 동의(필수)" },
    { id: 2, data: "개인정보 수집 및 이용 동의(필수)" },
    { id: 3, data: "위치기반서비스 이용약관 동의(선택)" },
    { id: 4, data: "프로모션 정보 수신 동의(선택)" },
  ];

  const [checkedList, setCheckedList] = useState([]);
  const onCheckedElement = (checked, item) => {
    if (checked) {
      setCheckedList([...checkedList, parseInt(item)]);
    } else {
      setCheckedList(checkedList.filter((el) => el !== item));
    }
  };
  const onRemove = (item) => {
    setCheckedList(checkedList.filter((el) => el !== item));
  };
  console.log(checkedList);

  return (
    <div className="SignUpPrivacy">
      <Header />
      <section>
        {list.map((it) => {
          return (
            <label key={it.id}>
              <input
                type="checkbox"
                value={it.id}
                onChange={(e) => {
                  onCheckedElement(e.target.checked, e.target.value);
                }}
              />
              {it.data}
            </label>
          );
        })}
      </section>
    </div>
  );
};

export default SignUpPrivacy;

 

 

3-1) input요소에 focus시켜주기 ; autoFocus

<input type="text" autoFocus />

 

3-2)input요소에 focus시켜주기 ; useRef

1. 변수명에 useRef()삽입

2. 해당 변수를 input의 ref속성에 설정

3. 변수.current.focus로 사용

import React, { useEffect, useRef } from "react";

const App = () => {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
};

export default App;
저작자표시 (새창열림)

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

[React] 자식 Component에서 부모 Componet로 값 변경하여 전달하기  (0) 2022.07.09
[React] 저장된 이미지들을 한번에 나열(보간법 사용)  (0) 2022.07.09
[React] useNavigate를 이용하여 사이트 이동하는 버튼 만들기  (0) 2022.07.08
[React] 최신 순 / 오래된 순 정렬  (0) 2022.07.08
[React] MyButton을 만들어 재활용하기  (0) 2022.07.07
[React] 라우팅(react-router-dom)(useParams, Query)  (0) 2022.07.07
[React] Hook  (0) 2022.07.07
[React] 부모 Component -> 자식 Component에게 함수/리스 전달하기  (0) 2022.07.04
  1. 1-1) text상태 관리하기 (input이 1개일 경우)
  2. 1-2) text상태 관리하기 (input이 2개 이상일 경우)
  3. 2. checkbox 상태 관리하기
  4. 3-1) input요소에 focus시켜주기 ; autoFocus
  5. 3-2)input요소에 focus시켜주기 ; useRef
'WebProgramming/React' 카테고리의 다른 글
  • [React] useNavigate를 이용하여 사이트 이동하는 버튼 만들기
  • [React] 최신 순 / 오래된 순 정렬
  • [React] MyButton을 만들어 재활용하기
  • [React] 라우팅(react-router-dom)(useParams, Query)
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • 구름톤
  • 개발 회고
  • Retry
  • 카카오
  • 개발 is life
  • 1일 1커밋 후기
  • 누적합
  • 해커톤
  • BFS
  • dfs
  • 1년 회고
  • lv3
  • 구름
  • LV2
  • Kakao Tech Internship
  • 카카오 채용연계형 인턴십
  • 스터디 후기
  • KAKAO BLIND
  • 개발 일상
  • 함수
  • 반복문
  • Union-find

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[React] useState로 input 상태 관리하기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.