React Hooks -1

React Hooks란?

 - function(함수)형 컴포넌트에서 사용할 수 없었던 라이프 사이클 및 state 형태를 사용하게 해주는 JS 라이브러리

 

1. useState

 - 함수형 컴포넌트에 state를 추가할 수 있다

 - 선언된 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지한다.

• 사용법  

  const [state,setState] = 1. useState('초기값')    // 배열 구조 분해 형식으로 선언

                                 2. useState(() => {const initialState = 함수(props) return initialState })

  setState("state 값을 변경할 값") // class 컴포넌트에서 this.setState 형식과 동일  

  //비동기식으로 선언시 두번째 인자에서 실행할 기능 선언  확인해보라

  //setState("변경값", ()=>실행할기능) this.setState({}, ()=> 실행할 기능)

- 초기값은 첫 번째 렌더링에서 한번 사용됩니다. (constructor 선언과 동일)

- 여러 개의 useState 선언 가능

 

위에는 무슨 말인가 ?

 

2. useEffect

 - 데이터를 가져오거나 DOM을 직접 조작하는 작업 : Side effect

 - 기본적으로 모든 렌더링이 완료된 후에 수행

 - useEffect는 함수 컴포넌트 내에 side Effect를 수행할 수 있게 해 준다.

 - useEffect 사용 시 DOM을 바꾼 뒤 useEffect안에 실행한 'effect' 함수 실행

 • 사용법

  useEffect (() =>{

   실행할 함수 혹은 기능 

    return (()=>{     // 해제할 필요가 있는 기능 구현 시 return에서 선언 ComponentDidUnmount 역할(필수 X)

      해제할 기능

    }

  },[props.인자]) // effect가 종속되어있는 값의 배열, 해당 값이 변할때 useEffec 실행 ComponentDidUpdate, 빈값일때

   렌더링시 한번만 실행됨

 - 여러 개의 useEffect 선언 가능

 

Hooks 규칙

1. 최상위에서만 Hooks 호출 가능, 반복문, 조건문, 중첩된 함수 내에 Hooks 실행 X

2. 함수형 컴포넌트 내에서 만 Hooks가능, 일반 JS함수 내에서 선언 불가능

 

Custom Hooks

생성한 Hooks를 다른 함수형 컴포넌트에서 객체 형식으로 사용할 수 있다.

EX)  ※ 색상 확인

1. function useFriendStatus(friend ID)

{

   const [isOnline,setIsOnline] = useState(null);

   ~~~

   return isOnline

}

 

2. function FriendStatus(props){

    const  isOnline = useFriendStatus(props.friend.id);

    ~~~

    return isOnline ? "Online " : "Offline"

}

 

3. function FriendListItem(props){

   const isOnline = useFriendStatus(props.friend.id);

   ~~~

   return (

     <li style ={{color:inOnline ? "green" :"black"}}>

      {props.friend.name} 

      </li>

    )

}