초보 개발자의 성장 일기

리액트 기초 (2) - Hooks 본문

Development/React JS

리액트 기초 (2) - Hooks

YUNA 2023. 11. 17. 11:21

 

Hooks

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 상호작용(Effect)하기위해 사용한다. Hook이름은 반드시 ‘use’시작해야 한다. 최상위 Level에서만 Hook호출 할 있다.

 

  • State Hook
const App = () => {
	const [state이름, setState이름] = useState(초기값)
    }

useState컴포넌트 동적인 데이터를 관리할 수 있다. 최초에 useState호출 될 초기값으로 설정되며 이후 렌더링이 경우 무시된다. state읽기전용 이므로 직접 수정하면 안된다. state변경하기 위해서는 setState이용한다. state변경되면 자동으로 컴포넌트가 렌더링된다.

 

state변경하기 위해서는 setState함수에 값을 입력하거나 현재값을 매개변수로 받는 함수를 전달한다. 함수에서 return되는 값이 state반영된.

 

  • Effect Hook
const App = () => {
	useEffect(EffectCallback, Deps?)
}

 

Effect Hook사용하면 함수 컴포넌트에서 side effect수행할 있다. 컴포넌트가 최초로 렌더링 될 , 지정한 StateProp변경 될 때 마다 이펙트 콜백함수가 호출된다. useEffect이펙트 함수 내에서 다른함수를 return경우 state변경되어 컴포넌트가 다시 렌더링 되기전과 컴포넌트가 없어질(Destroy)호출할 함수를 지정하게 된다.

 

Deps: 변경을 감지할 변수들의 집합(배열)

EffectCallback: Deps지정된 변수가 변경될 실행할 함수

 

  • useMemo
constApp = () => {
	const[firstName, setFirstName] = useState('철수')
    const[lastName,setLastName] = useState('김')
    // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
    
    const fullName = useMemo(() => {
    return′${firstName} ${lastName}′
    }, [firstName, lastName])
}

지정한 StateProps변경될 경우 해당값을 활용해 계산된 메모이제이션하여 재렌더링불필요한 연산을 줄입니다. useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래걸리는 로직을 성하지 않는것을 권장한다.

 

  • useCallback
constApp = () => {
	const[firstName, setFirstName] = useState('철수')
    const[lastName,setLastName] = useState('김')
    // 이름과 성이 바뀔 때마다 풀네임을 return하는 함수를 메모이제이션
    
    const getfullName = useCallback(() => {
    	return′${firstName} ${lastName}′
    }, [firstName, lastName])
    
    return<>{fullname}</>
}

함수메모이제이션 하기위해 사용하는 Hook이. 컴포넌트가 재렌더링 될 불필요하게 함수가 다시 생성되는것을 방지한다. useMemo(() => fn, deps) useCallback(fn, deps)같다.

 

  • useRef
constApp = () => {
	const inputRef = useRef(null)
    const onButtonClick = () => {
    	inputRef.current.focus()
    }
    return (
    	<div>
        	<input ref={inputRef} type="text" />
            <button onClick={onButtonClick}>
            	input으로 포커스
            </button>
        </div>
     )
}

컴포넌트 생애주기내 에서 유지ref 객체를 반환한다. ref 객체는.current라는 프로퍼티를 가지며 값을 자유롭게 변경할 있다. 일반적으로 React에서 DOM Element접근사용한다. (DOM Elementref 속성이용) useRef의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링 되지 않는다.

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript