input과 type으로 알아보는 useState ⚛️

 

들어가기 전에

westagram 구현 중 useState 부분에 관한 이해가 부족하여 실습을 진행하였으나 여럿 에러들을 만났다.

useState에 대한 개념을 다시 잡고자 만났던 에러들 중 하나를 뜯어보며 글을 남겨보려 한다.

 

useState의 기본적인 개념

useState는 리액트 16.8에서 나온 Hook 기능 중 하나이며 컴포넌트에서 동적인 상태를 관리할 수 있다.

 

const [state, setState] = useState(initialState);

https://reactjs.org/docs/hooks-state.html

Using the State Hook – React

첫번째 값인 state는 현재 상태를 뜻하고, 두번째 값인 setState는 state의 상태를 변경시켜주는 Setter함수이다.

프로퍼티의 종류
객체의 프로퍼티는 데이터 프로퍼티data property와 접근자 프로퍼티accessor property 두 가지로 나뉘는데, 이 접근자 프로퍼티는 함수로써 값을 획득get하고 설정set하는 역할을 담당한다. 접근자 프로퍼티는 획득자getter와 설정자setter 메서드로 표현된다.

 

구현 목표

(1) 두 개의 input창

(2) input 창에 입력된 것을 초기화하는 버튼

(3) input창에 입력한 값을 출력하는 부분

(4) 입력 된 input창의 값에 따른 alert창

 

발생 오류

alert 경고 창의 확인 버튼을 누른 후 뜬 console 경고와 사라진 (3)의 입력값들

 

탐구 과정

1. 처음에는 alert창의 확인 버튼 클릭 이후에 input창의 값은 변화하지 않고 {texts.id}값만 변화하여 alert의 렌더 과정과 연관이 있을까 찾아보았다.
2. {texts.id}의 값이 빈 배열로 바뀌어 초기값으로 지정된 useState(’ ‘)를 의심해보았고, 초기값을 변경해보았지만 관계가 없었다.
3. 빈 배열이 초기값이 아니면 어떤 상태인지 확인하기 위해 typeof + {texts.id} 를 확인해보았다.
4. typeof + {texts.id}의 출력 값이 undefined인 것을 확인할 수 있었다.
5. undefined는 어떤 상태에 출력이 되는지 알아보다가 {texts}를 업데이트해주는 setTexts와 그 인자를 살펴보았다.

 

---

 

texts는 setTexts의 인자를 통해 변경된다.

그럼 setTexts의 인자로 준 e.target.value의 값은 무엇일까?

 

console.log("target value:", e.target.value)
console.log("event target value type:", typeof e.target.value)
console.log("texts:", texts);
console.log("texts type:", typeof texts);

 

onClick 함수가 실행될 때 입력되는 값을 확인하기 위해 console.log를 확인해보자

 

alert가 실행될 때 target의 value는 string이다. input에서 입력된 값은 모두 string이기 때문이다.

(input태그의 type속성을 number로 바꾸든 password로 바꾸든 type은 모두 string으로 출력된다)

그럼 정상 작동할 때의 texts와 e.target.value를 인자로 받은 texts는 어떤 형태일까?

 

console.log("texts", texts);
console.log("texts", typeof texts);

 

texts와 관련된 부분을 onClick 함수에 넣지 말고 return문 직전에 넣어보자

 

기존의 {texts} 값은 id와 pw로 구성된 객체인 것을 확인할 수 있다.

 

 

그럼 alert를 실행했을 때는 어떻게 될까?

확인 버튼을 눌러보자

 

object로 찍히던 {texts}의 타입이 string으로 변경되었다.

앞서 살펴본 e.target.value의 값이 string이었기에 전달된 것이다.

 

ID: {texts.id}
PW: {texts.pw}

 

객체로 전달되어 각각의 .id .pw 값을 확인하던 것들이 string인 빈 배열로 전달되어

 

ID: {"".id}
PW: {"".pw}

 

이런 식으로 읽히는 꼴이 되니 undefined가 출력되었던 것이다.

 

해결 방안

setTexts(e.target.value)는 string이기에 이를 재전달하기 위해 이후에 다시 한 번 setTexts를 객체 형태로 지정을 해야 한다.

 

const onClick = e =>{
        setTexts(e.target.value);
        if(texts.id.includes('@') && texts.pw.length > 4){
            alert('조건을 만족했습니다!')
            setTexts({
                id:'',
                pw:'',
            })
        } else {
            alert('id에 @을 포함하고 pw는 5글자 이상을 써주세요')
            setTexts({
                id:'',
                pw:'',
            })
        }
    }

 

위 코드는 흐름적으로 이해하기 쉽지만, 코드를 줄이기 위해서 setTexts의 각각의 객체 값에 e.target.value를 주는 방법도 있다.

 

const onClick = e =>{
        setTexts({
            id: e.target.value,
            pw: e.target.value
        });
        if(texts.id.includes('@') && texts.pw.length > 4){
            alert('조건을 만족했습니다!')
        } else {
            alert('id에 @을 포함하고 pw는 5글자 이상을 써주세요')
        }
    }

 

그럼 setTexts가 이미 객체값으로 지정되어 있기에 e.target.value가 string이어도 texts는 object 타입으로 확인할 수 있다.

 

 

정리

• useState는 객체 형태이다.
  • state와 setState는 각각의 key값을 뜻한다.
  • [state] : ' ', [setState] : ' '
• input창을 통해 전달 된 e.target.value는 string이다.
• 객체로 지정한 값은 객체로 전달해야 한다.
• 궁금한게 있으면 생각만 하지 말고 손을 움직이자. console.log는 명확하다!

 

---