리액트의 Hooks

sunone-lee·2022년 9월 13일
0

React

목록 보기
4/9

1. useState

컴포넌트의 state(상태)를 관리 할 수 있다.
상태에 따라, 다른 화면 출력

React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거역할을 하는 변수

React가 state를 감시하고, 바뀐 정보에 따른 화면을 표시해준다.

( state와 setState함수의 반환값을 비교 )

state 만들기 ( useState 사용 )

// React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.

import { useState } from "react";

// const [state, state변경함수] = useState(기본 state값);

const [isLoggedIn, setIsLoggedIn] = useState(false);

state 변경하기 ( 사용자 반응에 따른 다른 화면 보여주기 )

// 전에 만든 "isLoggedIn" state의 값을 true로 변경한다.

setIsLoggedIn(true);

// ** useState함수를 사용해 만든 "state 변경 함수"를 사용하여야 한다.

2. useEffect

렌더링 이후에 실행할 코드를 만들수 있다.
어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다.

사용법

// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기

import { setState, useEffect } from "react";

...

function App() {
  const [data, changeData] = setState(false)
  
  // useEffect(실행할 함수, 트리거가 될 변수)
  
  useEffect(() => {
    if (data.me === null) {
      console.log("Data changed!")
    }
    
    return () => console.log("컴포넌트 파괴, 언마운트 됨")
  }, [data]);  
  
  // data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
  
  return (
    <div>
      <button value="적용" onClick={changeData(!data)} />
    </div>
  )
}

export default App;

clean up function

useEffect 동작하기 전에 특정코드를 실행하고 싶으면
return ()=>{} 안에 넣을 수 있습니다.

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

그럼 useEffect 안에 있는 코드를 실행하기 전에
return ()=>{ } 안에 있는 코드를 실행해줍니다.
참고로 저걸 clean up function 이라고 부릅니다.

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성합니다.
(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행됩니다.

1. 재렌더링마다 코드를 실행가능합니다.

useEffect(()=>{ 실행할코드 })

2. 컴포넌트 mount시 (로드시) 1회만 실행가능합니다.

useEffect(()=>{ 실행할코드 }, [])

3. useEffect 안의 코드 실행 전에 항상 실행됩니다.

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

4. 컴포넌트 unmount시 1회 실행됩니다.

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

5. state1이 변경될 때만 실행됩니다.

useEffect(()=>{ 
  실행할코드
}, [state1])

3. useRef

컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.

사용법

HTML요소(태그)나 컴포넌트의 메모리주소를 가져와, 객체(레퍼런스) 형식으로 관리할 수 있다.

  • current 속성을 가지고 있는 객체를 반환한다.
  • current 값이 바뀌어도, 재렌더링 되지 않는다.
  • 재렌더링시에도, current 값은 없어지지 않는다.
export default App(){
  // 괄호()속에 초기값 입력
  const viewRef = useRef(null)
  
  // viewRef 객체에 있는 메소드를 사용한다.
  function testFunc(){
    viewRef.current?.메소드()
  }
  
  /// viewRef요소에, 해당 메모리 주소 전달
  return <View ref={viewRef}>
    <Text>Test</Text>
  </View>
}

참고 :
https://ko.reactjs.org/docs/hooks-state.html

0개의 댓글