Hooks💪

Hook은 항상 use라는 키워드로 시작합니다.(use~를 hook이라고 부른다.(useState, useEffect))

Hook이란?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

Hook은 함수 컴포넌트에서 state를 갖게 해주는 함수입니다.
훅은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수입니다. 훅을 이용하면 함수형 컴포넌트에 상탯값을 사용할 수 있고, 자식 요소에 접근할 수도 있습니다.

Hook은 왜 등장했을까요?

리액트 생명주기를 함수형 component에서는 사용을 못했었습니다. 그래서 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔습니다.
React 16.8 Hooks 업데이트로 변경되었습니다.
Hook 등장 이유 : Class componet의 단점 보완(긴 코드, 복잡함), 재사용성 강화를 위해

<컴포넌트의 Lifecycle>

(3단계)
컴포넌트 화면에 첫 렌더링(mount)-state조작 등 업데이트(update)-화면에서 사라질 때(unmount)

• 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.
• 주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다.
  props가 바뀔 때
  state가 바뀔 때
  부모 컴포넌트가 리렌더링 될 때
  this.forceUpdate로 강제로 렌더링을 트리거할 때

---

useState

useState: 상태값을 관리하는 훅. useState 훅을 이용하면 컴포넌트에 상탯값을 추가할 수 있습니다.
useState 훅이 반환하는 배열의 두 번째 원소는 스테이트를 변경하는 함수입니다.

const App = () => {
  const [count, setCount] = useState(0); //초기상태
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
};

class 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

https://ko.reactjs.org/docs/hooks-state.html

---

useEffect

useEffect: 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다. 리액트는 우리가 넘긴 함수를 기억했다가( 이 함수를 'effect') DOM 업데이트를 수행한 이후에 불러낸 것입니다. useEffect 안에 있는 코드는 html 렌더링 후에 동작합니다.(for문 i<1000000일때 유용, 어려운 연산, 서버에서 데이터가져오는 작업, 타이머 장착)

(1) 렌더링 될때 마다 실행

useEffect ( () => {
  console.log("hi");//작업   mount,update시 코드 실행
});

(2) 렌더링 될때 마다 실행

useEffect ( () => {
  console.log("hi");//작업   mount시 코드 1회만 실행
},[]);

(3) 화면에 첫 렌더링 될때 실행(새로고침), value값이 바뀔 때 실행

useEffect ( () => {
  console.log("hi");//작업
},[value]); //두번째 인자인 배열을 dependency array라고 함. state값을 넣어줌, state가 변화될 때 마다 작업이 실행됩니다.

(4)

cont Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('타이머 돌아가는중...');
    }, 1000);
    
    return () => {   //별명: clean up function. unmount시 실행됨(컴포넌트 삭제됐을시)
      clearInterval(timer);
      console.log('타이머가 종료되었습니다.');
    };
  }, []);
  
  return (
  	<div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  );
};

---

커스텀 훅

커스텀 훅 만들기(훅들이 반복할 경우)
use{Name}

https://ko.reactjs.org/docs/hooks-custom.html