React - 후크

후크

정의

• 프롭을 인수로 받아, 리액트 요소를 반환하는 자바스크립트 함수

주의

• 후크는 리액트 함수의 컴포넌트의 최상위에서 호출해야함
  • 루프, 조건문이나 중첩된 함수의 내부에서는 후크의 호출할 수 없음
• 리액트 함수 내부에서만 호출 가능함

종류

useState

정의

• 컴포넌트의 상태를 관리하는 리액트의 후크
• 무조건 초기값을 지정해줘야함

사용 방법

const[현재 컴포넌트 변수, 상태 업데이트 함수] = useState(초기값) 

//예시
const [userName, SetUserName] = useState[''];


//값 가져오기
<p> 유저명 : {userName}</p>

//값 변경하기
SetUserName('Alpha');

• 초기값으로는 0, true, ‘’ 등 다양한 값을 가질 수 있음
• 값의 변경은 상태업데이트함수(새로운 값)의 형태로 변경 가능함
• 값을 가져오기 위해서는 현재 컴포넌트 함수를 사용하여 가능함

주의

• 상태 업데이트는 비동기로 진행됨

  • 새로운 상태의 값이 현재 값에 의존할 경우에는 주의해야 함

  • SetCountNum( prevCount => prevCount + 1)
    

  • 위와 같은 코드를 이용하여 최신 값이 사용되게 할 수 있음

  • 리액트 18이후부터는 상태 업데이트가 일괄 처리되므로, 원하지 않을 경우 react-dom 라이브러리의 flushSync API를 이용하여 일괄 처리를 막을 수 있다

useEffect

정의

• 컴포넌트가 렌더링 될 때마다, 특정 작업을 수행하는 Hook
  • fetch요청 등이 예시

사용 방법

• useEffect는 callback 함수와 dependencies 2가지의 인수를 받는다
  • callback 함수: 보조 작업의 논리를 포함함
  • dependencies: 의존성을 포함하는 배열을 나타내는 인수(선택사항)
  • 두번쨰 인수인 depencies를 이용하면 렌더링될때마다 코드가 실행되는것을 방지 할 수 있다
    • 두번째 인수로 빈 배열을 전달할 경우, 첫번쨰 렌더링 후에만 useEffect 함수가 실행된다
  • 예시

//렌더링이 끝날 때마다 호출
useEffect(()=> {
    console.log("useEffect 함수 실행됨")
});

//인수 값이 변경될 때마다 호출
useEffect(()=> {
    console.log("useEffect 함수 실행됨")
}, [userName]);

//첫번째 렌더링 때만 호출되게 하기
useEffect(()=> {
    console.log("useEffect 함수 실행됨")
}, []);

• 보조 작업의 정리

  • 더 이상 작업이 필요없게 될 경우에는 return값에 함수를 넣어서 작업의 중지가 가능하다
  • 예시

  useEffect(() => {
      //작업할 내용
      return () => {
          //작업 종료할 내용
      }
  }, [count]};
  

  • 위의 코드는 count의 값이 변경될 경우 작업을 종료한다

useRef

정의

• 렌더링에 필요하지않는 값을 참조할 수 있는 Hook
• useRef는 변경 가능한 단일 프로퍼티를 가진 ref 객체를 반환함
• 값을 변경해도 재렌더링이 되지않음
  • Interval ID의 저장 및 관리나 DOM 노드 접근과 같은 역할에 적합함

• 내부의 값을 변경하려면 현재 프로퍼티를 수동으로 변경해야함

• 주의
  • 렌더링 중에는 ref.current를 써서는 안됨
  • 값이 변경되어도 재렌더링이 되지않으므로, 이런 경우에는 state를 사용해야 함

사용방법

//선언
const 후크이름 = useRef(초기값);

//값의 변경 예시
const intervalRef = useRef(1);

function handleRefVal() {
    const intervalId = seInterval(() => {
        //내부 내용
    }, 10);
    intervalRef.current = intervalId;
}

//Interval 취소
function handleStopRefVal() {
    const intervalId = intervalRef.current;
    clearInterval(intervalId);
}

---

참고한 자료

예제로 이해하는 react의 usestate

React Hooks : useEffect() 함수

[React] 다시 한번 useEffect를 파헤쳐보자

useRef