🎯 Achievement Goals

• useState를 사용할 수 있다.
• useEffect를 사용할 수 있다.

👉 useState

드디어 React-Hook 스프린트에 도달했다. Hook이 2019년에 생기고 코드스테이츠에서도 이제 막 교육을 준비하는 단계여서 그런지, Hook에 대해서는 공식문서를 보면서 공부하고 따로 강의를 보고 공부하는 방법이 더 좋았던 것 같다.

나는 이전에 틈틈이 공부를 해와서 오늘 다시 이해를 하는데 오랜 시간이 걸리지 않았다. 확실히 Class에서만 사용할 수 있었던 state를 function에서도 쓸 수 있을 뿐만 아니라, this를 사용하지 않아도 된다는 점이 너무 좋았다.

Syntax

// 클래스
class checkboxExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: false,
    }
  };
}

// Hook
import React, { useState } from 'react';

const checkboxExample = () => {
  const [isChecked, setIsChecked] = useState(false);

// const[상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);
}

const [items, setItems] = useState([]);
// 만약 두번째 인자가 빈 배열이라면 class의 componentDidMount와 비슷하다.
// 그리고 re-render가 필요할 때마다 작동한다.

isChecked이라는 state변수에 들어갈 초기값을 useState에 넣어놓으면 React는 이 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공한다. 그 값은 setIsChecked 를 통하여 호출할 수 있다.

👉 useEffect

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

//...생략
// useState는 여러번 사용 가능하다.
const { language } = props;
const [items, setItems] = useState([]);
const [checked, setChecked] = useState(false);

//...생략

useEffect(() => {
  fetch('https://....생략')
  .then(data => data.json())
  .then(data => {
    setItems(data.items);
  }),
}, [language])

useEffect는 우선 컴포넌트 Render 시 1회 작동된다. 그 후 두번째 인자 배열 요소가 변화함에 따라서 작동이 된다. 즉, 이후에 배열의 요소가 변경이 되면 useEffect의 첫번째 인자 callback이 실행된다.

useEffect는 component * (DidMount + DidUpdate + WillUnMount)가 합쳐진 것과 같다.

🙌 느낀점

오늘은 스프린트에서 Hook에 대한 개념만 배웠기 때문에, 일단 오늘 배운 내용중에 기억나는 부분만 적어보았다.

오늘은 Hook에 대해서 간략하게 정리했다. 왜냐하면 내일이 바로 이머시브 코스(심화과정) 들어오고 나서 두번째 H.A시험이기 때문이다. 다 좋은데 H.A시험에서 리액트 Hook을 쓸 수 없다는게 웬 말인가… Hook은 시험 끝나고 더 공부해야겠다.

이번 H.A는 Full Stack으로 영화 정보를 보여주는 애플리케이션을 만들어야 한다. 클라이언트와 서버 각각 구현해야할 요구사항들을 만족시키면 통과가 된다. 내가 부족하다고 느끼는 REST API, React 부분을 복습해서 내일 시험준비를 잘 마쳐야 겠다.

👊 내일의 TIW(today I Will)

H.A 시험