State Hook_React

hook 정의

• hook은 class 안에서는 동작하지 않는다
• 함수 컴포넌트에서 state와 생명주기 기능을 연동할 수 있게 해주는 함수이다
• 규칙1: 무조건 최상위 레벨에서만 훅을 호출해야한다.
  그리고 반복문, 조건문, 중첩된 함수 내에서 실행하면 안된다
• 규칙2: react 함수 컴포넌트 내에서만 hook을 호출해야 한다.
  js함수에서는 hook을 호출하면 안됨.
• 배열구조분해 (인덱스로 리턴값은 무조건 배열)

const arr = [1,2,3];
const [hi, bye] = arr;
console.log(hi) //1
console.log(bye) //2

state Hook

• 상태를 관리하기 위해 사용하는 hook
• useState라는 내장된 hook을 사용

useState

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

• 상태 유지 값과 그 값을 갱신하는 함수를 반환한다.
• 최초로 렌더링을 하는 동안 반환된 state는 첫번째 전달된 인자(initialState)의 값과 같다.
• setState 함수는 state를 갱신할때 사용한다

setState(newState + 1); //setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

• 다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 된다
  예시)

//클래스형 컴포넌트
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
	  ismodalActive: false,
    };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

// 함수 컴포넌트
function Example() {
  // 새로운 state 변수를 선언하고, count라 선언한다.
  const [count, setCount] = useState(0);
  const [isModalActive, setIsModalActive] = useState(false);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
	<button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
  );
}

export function App(){
	const [count, setCount] = useState(0);
  
  	const up = () => {
      setCount((prev) => {
        console.log("prev", prev);
        return prev + 1;
      });
    };
  
  return(
    <h1>{count}</h1>
    <button onClick={up}>up</button>

• useState()하나에서 모든 상태 값을 관리하려면

const [position, setPosition] = useState({ left: 0, top: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });

클로저

• 자신이 생성될 시점의 환경을 기억하는 함수,
  실행이 끝나고도 메모리에 스스로를 남겨둘 수 있다

// 아주 간단한 버전의 useState

const useState = (init = undefined) => {
  let value = init

  const getter = () => value // 클로저
  const setter = next => (value = next) // 클로저

  return [getter, setter]
}

const [state, setState] = useState('클로저')

state()
setState("어려워!")
state()