$$config title: [React] React Hooks(useState method) keywords: - useState - ... $$ # React Hooks(useState method) - 리액트 컴포넌트에서 동적인 값을 상태(state) - 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리 - 함수형 컴포넌트에서도 상태를 관리 - Hooks 중에 useState() 함수가 존재, 이를 통해 함수형 컴포넌트에서도 상태를 관리 - useState는 값이 변하는지 변하지 않는지 상태를 관리 - 초기값을 줄 수 있는데 초기값을 통해서 특정 값을 정의해주는 함수를 생성 가능 # useState() method used ```js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(preNum => preNum + 1); } const onDecrease = () => { setNumber(preNum => preNum - 1); } return (

{number}

); } export default Counter; ``` - import React, { useState } from 'react' - 리액트 패키지에서 useState 함수 호출 - const [number, setNumber] = useState(0) - useState 함수를 호출하면 배열을 반환 - 1번째 원소 number는 현재 상태 값 변수, 2번째 원소 setNumber는 상태 값을 갱신해주는 Setter 함수 - useState 괄호 안의 값은 상태의 초기 값 - ``const [상태 값 저장 변수 , 상태 값 갱신 함수] = useState(상태 초기 값)`` - const onIncrease = () => {setNumber( preNum => preNum + 1) ;} - 상태 값 갱신 함수 setNumber는 파라미터로 전달받은 preNum을 최신 상태로 설정 > 동일한 예시 - setNumber( number + 1) - setNumber 파라미터에는 위와 같이 업데이트 할 새로운 값 - setNumber( preNum => preNum + 1) - 기존 값을 값을 업데이트 하는 함수를 넣어 값을 업데이트 - 함수형 업데이트는 컴포넌트를 최적화 할 때 주로 사용 # useState( ) 함수 상태 관리 ## input 태그 하나일 경우 ```js import React, { useState } from 'react'; function InputTest() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return (

내용: {text}

); } export default InputTest; ``` - const onChange = (e) => { setText(e.target.value); } : 이벤트가 일어나는 타겟의 value를 text 값으로 업데이트 - const onReset = () => { setText(''); } : text 값을 '' 공백으로 업데이트 - `````` : input 태그에 onChange 이벤트를 등록, value 값으로 text 상태 값 : value 값을 설정해주지 않으면 상태가 바뀌었을 때 input 내용이 업데이트 X ## input 태그 여러 개의 경우 - 각 태그에 name 값을 설정해주고 이벤트가 발생했을 때 이를 참조하여 상태 값을 관리 - 여러 개의 state 를 관리해야 하기 때문에 useState 함수는 객체 형태 제공 ```js import React, { useState } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const { name, nickname } = inputs; const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, [name]: value }); }; const onReset = () => { setInputs({ name: '', nickname: '', }) }; return

소개: {name} ({nickname})

; } export default InputSample; ``` - const [inputs, setInputs] = useState({ name: '', nickname: '' }) : 객체 형태로 두 input 태그의 name 속성의 초기값을 설정 - const { name, nickname } = inputs : inputs 상태값을 디스트럭쳐링 하여 두 name 속성값을 추출 - const { value, name } = e.target; : 이벤트 타겟의 속성 value와 name을 추출 - setInputs({...inputs, [name]: value }); : 리액트 상태에서 객체를 수정할 때는 inputs[name] = value 와 같이 직접 수정 : spread 문법을 사용하여 ...inputs, 기존 객체를 복사하여 새로운 객체를 생성, 이 새로운 객체에서 상태를 업데이트 ```[name]: value```