2022.08.07./라이프 사이클과 리액트 훅

1.  라이프사이클(클래스형 vs 함수형)

1) 클래스형 컴포넌트의 라이프 사이클

2) 함수형 컴포넌트 라이프 사이클

2. react hooks

1) 리액트 훅 사용 규칙

• 훅은 최상위 레벨에서만 호출 가능합니다. 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 됩니다.
• 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다

 

2) 리액트 내장 훅 API

 

①기본 Hook

• useState()
  state와 state의 상태를 설정하는 함수를 반환

import React from "react";

cosnt Dog = () => {
		//값      값 변경 함수               초기값
	const [name, setName] = React.useState("Rive");
    
	return(
		<h1>{name}</h1>);
        //버튼을 누르면 state 값을 변경하는 함수 실행
        <button onClick ={()=>{setName("Seio")}}>바꾸기</button>
};

//화면에는 초기값 Rive 가 나타났다가 
//버튼을 누르면 Seio로 바뀜

• useEffect()
  클래스 컴포넌트의 생명주기 메소드
  componentDidMount(), componentDidUpdate, componentWillUnmount()를 통합한 것

import React from "react";

const Dog = () => {
	//렌더링이 될때마다 {} 콜백함수 실행
    //[]=>의존성배열,이 바뀔때만 {}의 콜백함수를 실행함
    React.useEffect(()=>{},[]);
    
    React.useEffect(()=>{
 		
 		return ()=>{
       //clean up 부분 화면에서 컴포넌트가 사라질 때 실행 }
        }.[]);
    return (
    );};

• useContext()
  인자로 context 객체를 받아 객체의 현재 값을 반환

 

②추가 Hook

• useReducer()
• useCallback()
  렌더링 최적화에 사용하는 훅 API로 렌더링 과정에서 두번째 인자로 주어진 의존 배열의 값이 바뀌면
  첫번째 인자로 주어진 콜백함수를 새로 생성하여 반환
  함수를 메모이제이션해서 여러번 만들지 않게 해줌.
  주로 자식 컴포넌트에게 전달해주는 콜백함수를 메모이제이션할 때 사용
  **메모이제이션 = 메모리 어딘가에 저장해 두고 계속 사용함

import React from "react";

const Dog = () => {

		//[]안에 넣은 값이 바뀔 때에만 {}함수를 메모이제이션 함 
    const dogMong = useCallback(()=>{},[])
	return (
    <Rive dogMong = {dogMong}/>
    );
    };
    

export const Rive = ({dogMong}) => {
	return (
    <button onClick={dogMong}>버튼</button>
    );
    };

• useMemo()
  연산 최적화에 사용하는 API로 렌더링 과정에서 두 번째 인자로 받은 의존배열내 값이 바뀌는 경우에만
  첫 번째 인자로 받은 콜백함수를 실행하여 구한 값을 반환하는 함수
• useRef()
  ref 객체를 다루기 위한 Hook
  ref 값 수정 가능, 수정을 해도 리렌더링이 이루어지지 않음

import React from "react";

const Dog = () => {
	const input_ref = React.useRef(null);
    
    return (
    <div>
    <input ref={input_ref}/>
    </div>);
    };

 

참고 : https://talking-potato.me/m/52