React Hook 종류와 정리

React hooks

: 클래스형 컴포넌트의 기능을 할 수 있는 함수형 컴포넌트이다.

• 라이프 사이클과 state관리 모두 가능하다.
• 함수형 컴포넌트 최상단에서만 사용 가능. (일반함수 불가능)
• 리액트 버전 16.8에서 추가되었다.
• Hook은 단순한 함수이고 커스텀 Hook을 만들 수 도 있다.

Hook 종류

useState

useState 사용하여 컴포넌트 내에서 바뀌는 값을 관리할 수 있다.
클래스 컴포넌트를 사용하지 않아도 state를 관리할 수 있다.(상태를 관리) 
[state이름, setter이름] 순으로 반환 받아서 사용한다.

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

useEffect

: 라이프 스타일을 관리하는 Hook이다.
화면에 렌더링이 완료된 후에 수행되며componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것

useEffect(() => {}); // 렌더링 결과가 실제 돔에 반영된 후마다 호출
useEffect(() => {}, []); // 컴포넌트가 처음 나타날때 한 번 호출
useEffect(() => {}, [의존성1, 의존성2, ..]); // 조건부 effect 발생, 의존성 중 하나가 변경된다면 effect는 항상 재생성됩니다.

예시)

  // useEffect(()=>{},[]) : 의존배열[]이 비어있을 경우
    useEffect(()=>{
        console.log("load시 1회 실행 (빈 의존배열)");
    },[]);

    // useEffect(()=>{})
    useEffect(()=>{
        console.log("rendering될 때 마다 실행된다.(의존배열 생략)");
    });
  
    // useEffect(()=>{},[값]) : []안의 값이 변경될 때마다 실행된다.
    useEffect(()=>{
        console.log("최초 rendering될 때, count변경 시 실행된다.");
    },[count]);
    useEffect(()=>{
        console.log("최초 rendering될 때, count2변경 시 실행된다.");
    },[count2]);
    useEffect(()=>{
        console.log("최초 rendering될 때, count, count2변경 시 실행된다.");
    },[count, count2]);

useEffect안에서의 return은 정리 함수(clean-up)를 사용하기위해 쓰여집니다.

1. 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행
2. 컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect가 정리됩니다.