value로 state가 들어가 있으면서 unmount상태인 input 컴포넌트의 문제

상황 :

서울시의 문화행사를 소개하는 간단한 웹사이트

미니 프로젝트를 진행하던 중에 내 의도하고는 좀 다른 결과를 내는 트러블을 맞이했다.

 

1. Boolean 타입의 state인 updateMode를 가지고 있는 컴포넌트 생성(true or false)

2. 'updateMode' 가 true일때는 input 보이고, false일때는 같은 자리에 input이 아닌 div가 보이게 끔 코딩했다.

3. 즉 state의 상태에 따라서, 편집기능을 넣고 싶었던 것.

4. 수정모드가 되면 div에 있던 Text들이 전부 input 안에 기본값으로 들어가야 하는 상황

 

....

<StTitle>제목</StTitle>
  {
    updateMode
      ? <input
        value={title}
        style={{ maxWidth: '1050px', width: '1100px' }}
        onChange={(e) => setTitle(e.target.value)}
        minLength={5}
        required
      />
      : <StSpan
        others={'overflow:hidden; overflow-wrap: normal; word-break: normal;'}
      >{data.title}</StSpan>
  }
  
  ...

색깔이 이상하긴 한데 주석처리가 아님.

 

문제:

 

초기 상태는 input이 아닌 div가 mount된 상태인데,

수정모드로 전환을 해서 input을 mount해도 input에 value가 들어가질 않는다.

 

 

 

원인 :

뭐라고 검색해야 할지 알수가 없어서 그냥 내가 현상을 지켜본 결과,

state를 선언하고 초기값으로 data.title을 넣었음에도 불구하고,

console.log를 띄우면 undefined로 할당이 된다.

즉, title이 초기화가 되질 않는다(?)

 

수정모드를 누르면 input은 div안에 있는 text값이 아닌, 빈칸으로 나타난다.

 

-------------------------------------------------------------------------------------------------------

원인을 찾았다.

컴포넌트의 js구문에서 mount되기전에 한번 싹 다 읽어내면서

스토어에 있는 값을 가져오기 전에, 이미 한번 싹다 읽으면서 undefined으로 들어가 있는상태.

컴포넌트가 mount되는 순간, div에는 값이 갱신되어서 들어가지만 

input은 umount 상태이기때문에 이때 값이 갱신되어서 들어갈 일이 없고

그 상태로 state는 undefined 상태로 유지가 되어있는 것이었다.

그래서 input이 mount 되는 순간에는 초기값으로 undefined가 들어가게 되는 것.

 

 

해결 : 

수정모드로 전환할때, Boolean형의 updateMode를 토글할 때,

토글 직후에 setState(data.title)로 값을 다시 초기화 시켜주도록 함수안에 코드를 써주니까 정상 작동을 한다.

 

 

느낀점:

나는 value={state}로 지정한 요소가 현재 mount되지 않았다고 하더라도,

당연히 state는 선언시에 초기화 한 값(useState(초기값)) 이 들어가 있을 거라고 생각했다.

그러나 그렇지 않았는데,

value가 엮여있는 요소가 있고, 이것이 마운트가 되지 않을 경우에,

state는 할당이 되지 않는 것으로 판명됐다.

도대체 왜 그런지는 모르겠다.

이런 현상을 뭐라고 검색해야하나..

아무튼 하나 깨달았으니 다음에는 이걸 알고 미리 코드를 좀 더 신경써서 할 수 있을 것 같다.