Udemy - React완벽가이드

useState 훅 자세히 살펴보기

Hanachoi 2023. 2. 18. 17:38
  • states는 리액트에서 핵심적인 개념이다. 
  • 특정 컴포넌트의 인스턴스를 위해 state를 등록한다. 
  • 우리는 Expense컴포넌트에서 ExpenseItem 컴포넌트를 네 번 사용 했다. 이 모든 ExpenseItem들은 별도의 state를 가지는데, 다른 상태와는 분리되어 있다.
  • 물론 ExpenseItem 컴포넌트에서는 이 함수를 한 번 밖에 정의하지 않았지만 Expense 컴포넌트에서 네번을 호출했고, 매번 호출 할때 마다 동일한 방법으로 새로운 별도의 state가 생성되지만 리액트에 의해 독립적으로 관리된다. 

  • 그래서 우리가 첫번째 ExpenseItem만 상태를 바꿔도 나머지들은 변화하지 않는다.  왜냐하면 자신들만의 state를 가지고 있기 때문이다 . 

  • 컴포넌트별 인스턴스를 기반으로 해서 독립적인 state를 가지게 된다.  이는 하나만 변경해도 나머지가 변경되지 않도록 해주기때문에 장점이다. 
  • useState를 사용하면 특정 컴포넌트 함수와  이 컴포넌트가 사용되는 인스턴스에서만 리액트는 그걸 재평가 하게 된다. 
  • 아래처럼 콘솔로그를 찍어보면 ExpenseItem 함수가 호출될때마다 콘솔에 찍히는걸 확인 할 수 있다. 

  • 우리는 ExpenseItem 을 네 번 사용했기 때문에 콘솔에도 4번 찍히는게 확인 가능하다. 즉 4개의 독립적인 인스턴스가 생성됬다는 말이다. 

  • 하지만 이제 다른 버튼을 한 번 더 누르게 되면 콘솔에 4번이 아닌 한번만 찍히는걸 볼 수 있다. 단지 그 특정 인스턴스만 업데이트되었기 때문에 그 state만 변경이 된 것이다. 다른 인스턴트들은 상태 변화에 영향을 받지 않는다. 

  • 또 왜 const를 사용해서 useState를 사용할까? 리액트에서는 =로 변수에 값을 할당해주는게 아니라 대신 state를 업데이트하는 함수를 호출하고 구체적인 값은 리액트에 의해서 관리된다. 우리는 변수자체를 볼수는 없지만 함수를 호출해서 state를 관리하게 된다.  = 를 사용하지 않기 때문에 const를 사용해도 된다. 
  • 가장 최신의 title 값은 어떻게 가져 오는 것일까? 컴포넌트형 함수에서는 state가 업데이트되면 재실행 된다는 사실을 잊지말자.  아래의 useState가 있는 이 부분은 컴포넌트형 함수가 실행될때 마다 같이 실행된다. 그래서 setTitle을 통해서 새로운 값을 할당하게 되면 전체 컴포넌트를 다시 불러오게 되면서 새로운 값이 업데이트 되는 것이다. 

  • useState(props.title)을 보면 우리가 초기값으로 props.title을 넣어줬는데 이부분은 처음으로 컴포넌트함수가 실행될때만 고려되어지는 값이다. 
  •