react3

React

HOOK

리액트의 state와 생명주기 기능을 원하는 시점에 사용할 수 있도록 실행되는 함수
https://ko.reactjs.org/docs/hooks-intro.html

// 클로져와 연관시켜 생각해봅시다(렉시컬소코프 : 상위스코프에서 참조)
// react

    useState(initialValue) {
      let _value;
      if (_value === undefined) {
        _value = initialValue
      }
      const setState = (newValue) => {
        _value = newValue;
      }
      return [_value, setState]
    }

모든 함수가 끝나야 value 값 업데이트 -> state Hook은 클로져로 구성되어있음

: 상태 변경 함수를 통하여 엘리먼트 값 변경 -> 변경된 값 화면 출력가능

setState 함수는 자신과 함께 반환이 된 변수를 변경시키는 것이 아니라 이후에 실행될 useState가 반환할 _vlaue를 변경시키고 컴포넌트 자체를 재렌더링 시킨다
즉, 변경된 값을 가져오는 함수는 setState가 아니라 useState다

state hook 사용하기

function UseState () {
 
  const [number, setNumber] = useState(0)

  const onClickHandler = () => {
     let newNumber;
      number >= 24 ? newNumber = 1 : newNumber = number + 1
      setNumber(newNumber)

  }
  
return (
    <div>
      <span>Number : {number}</span>
      <button onClick={onClickHandler}>Click</button>
    </div>
  );
} 
  

유데미 강의
https://www.udemy.com/course/complete-react-developer-zero-to-mastery/

react developer tools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

->state가 변하는 컴포넌트 표시해주는 크롬확장자

실습에서 set함수 관련하여
too many re-renders 에러가 발생하는 이유정리하기