React. Hook

React. Hook

⊙ React Hook

• 함수형 컴포넌트만으로 state관리와 Life cycle method의 사용을 가능하게 해준다.
  

  // useState - state관리
  let [box, setBox] = useState('클릭 전');

  onClick={()=>{
    setBox('클릭 후');
  }}

  // useState()는 인자로 초기값을 받고, 
  // 현재 상태(box)와 현재 상태를 업데이트할 수 있는 함수(setBox)를 반환해준다.

• useEffect는 한 컴포넌트에 여러개 작성이 가능하다.

• 여러개가 작성된 경우 순서대로 작동된다

  // useEffect - Life cycle method
  useEffect(()=>{
    // 컴포넌트가 생성 될때 or 업데이트 될때     
    return () => {
      // 컴포넌트가 소멸 될때
    }
  },[/* 조건 삽입 (null 이면 업데이트 될때는 동작안함) */]);

• 위와 같이 컴포넌트가 생성, 수정, 소멸 될때 비지니스 로직을 작성할 수 있다.