React 관련 질문 드립니다.

React
1

안녕하세요. React를 처음 공부하는 학생입니다.
input을 통해서 input을 받은 값에 추가 적인 부분을 붙인 리스트를 state로 설정한 뒤 해당 state를 동적으로

    태그 상에서 이용을 하려고 하고 있습니다.
    이 경우 현재 위의 동작은 정상적으로 하는데 ul태그 상에서 해당 리스트를 onClick하는 경우 setState를 이용해서 input값을 클릭된 값으로 바꾸고 리스트도 [’’] 이처럼 초기화를 하려고 하고 있습니다. 그런데 이러한 동작 다음줄에서 리스트를 출력해보면 초기화 되지 않은 리스트가 나오는데 혹 왜그러는거인지 알수 있을까요? 
<ul className={`result_list ${inputValue === '' || result === [''] ? 'empty' : ''}`} style={style}><li
        onClick={(e: any) => {
          this.setState({inputValue: e.target.value , result:['']});
          console.log(result);
        }}
        >{children}</li></ul>
2

저기 위에 코드에서

          this.setState({inputValue: e.target.value , result:['']});
          console.log(result);

console.log(result)가 아니라 console.log(this.state.result)를 질문하신거 아닌가요?
setState는 비동기로 동작합니다. 따라서 setState호출하고 나서 다음줄인 console.log를 실행할 때 state가 바뀌는 동작이 이루어져있는 것이 아닙니다.
state가 바뀐다음에 무언가를 해야한다면 다음 처럼 두 번째 인자로 callback함수를 지정하면 됩니다. 이렇게 하면 setState에서 지정한 대로 state가 바뀐 이후에 해당 콜백이 실행됩니다.

this.setState( {
  result : newArray
}, ()=>{
  //doSomething 
})

setState는 비동기적 특징 때문에 주의해야할 사항들이 있는데 관련해서 검색해보시면 여러 글들이 나올 겁니다. :slight_smile:

3

답변 감사합니다.
그렇다면 저는 onClick을 통해서 클릭을 하게 되는 경우 this.state의 result의 값을 초기화 하고 그 즉시 반영이 되게 하고 싶은데 추천해 주실만한 방법이 있을까요?