React 개념 정리(Hook, State)

hook은 react 버전 16.8부터 새로 추가 되었다.

 

 Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

 

리액트의 함수 컴포넌트는 아래와 같이 구현 할 수 있다.

 

const Example = (props) => {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}


function Example(props) {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

 

---

 

state

 

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

 

useState를 통해 state변수를 선언할 수 있다. 보통 형식 const안에 "변수 이름", set"변수이름"으로 선언한다.

 

useState()Hook의 인자로 넘겨주는 값은 state의 초기 값이다

 

useState는 state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유이다.

 

useState()안에 지금은 0 이라고 선언되어있지만 이 초기값은 boolean true가 될 수도 있고  " "가 될 수도 있다.

 

변수 값을 갱신하려면 set"변수이름"을 호출하면 된다.

 

 

---

 

Effect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

단순하게 useState안에서 예를 들어 setNum(num+1) 이런식으로 간단하게 작동되는 기능이면 좋겠지만 그렇지 않은 경우도 많다.

 

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects이다. 

 

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야할 지를 말한다. 

 

useEffect를 컴포넌트 안에서 불러내는 이유는 무엇일까요?

 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됩니다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것입니다. Hook은 자바스크립트의 클로저를 이용하여 React에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다.

 

useEffect는 렌더링 이후에 매번 수행된다.

 

useEffect(() => {
	// 데이터 조회하기
	// 자동로그인 판별

	// 컴포넌트가 화면에 가장 처음 렌더링됐을 때에만 실행하고 싶을 때
},[]);

useEffect(() => {
	if(email && password) {
		setFlag(true);
		return;
	}
	setFlag(false);

	// 특정 값이 업데이트될 때마다 실행하고 싶을 때
},[email, password]); // 옆의 배열을 useEffect의 dependency array라고 부름

useEffect(() => {
	return () => {
		// 컴포넌트가 사라지기 직전에 특정 코드를 실행하고 싶을 때
	};
},[]);

 

참고https://ko.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects