[새싹x코딩온] 웹 개발자 부트캠프 과정 13주차 회고 | React Hooks(1)

1. 들어가며

• 리액트의 Hooks 살펴보기

2. React Hooks

Hook 이란?

React 의 Hook은 함수형 컴포넌트에서 state(상태관리) 와 lifecycle(생명주기) 기능을 가능하게 해주는 기능이다.

 

✔ Hook은 클래스형 컴포넌트에서는 동작하지 않는다. ( = 함수형 컴포넌트 내에서만 호출할 것!)
✔ Hook은 최상위 단계에서만 호출해야 한다! (반복문, 조건문, 중첩된 함수 내에서 호출하면 안됨!)

function Example1(){
	const number = 5
	if(number > 0){
    	useEffect(() => {console.log('실행')}, []) 
        // 이런식으로 조건문 내에서 쓰는것 안됨
    }
    
    return <div>example1</div>
}

function Example2(){
	const items = [1, 2, 2]
    for(let i = 0; i < items.length; i++){
    	useMemo(() => items[i]) * 2, [items[i]]);
        // 이런식으로 반복문 내에서 쓰는것 안됨
    }
    
    return <div>example2</div>
}

 

Hook 의 종류

1) useState

useState는 상태 관리를 해주는 훅이다.

이전 포스팅에서 다뤘기 때문에 여기서는 생략

 

2) useRef

렌더링에 필요하지 않은 값을 참조(reference)할 수 있는 훅

 

1. ref 로 값을 참조할 때 사용한다.

(ref는 값이 변경되어도 state처럼 리렌더링이 되지 않으므로 로컬변수처럼 사용할 때 사용한다.

-> 컴포넌트의 시각적 출력에 영향을 미치지 않는 정보 저장에 적합)

 

아래 예시는  state와 ref의 조합을 사용해서 스톱워치를 구현한 것이다(출처 : 공식 홈페이지! )

See the Pen Untitled by dain (@dadain) on CodePen.

startTime과 now 변수는 렌더링되면서 시간을 보여주기 때문에 state 변수에 넣는다.

그러나 버튼을 눌렀을 때, clearInterval 이 실행되어야 할 변수(혹은 함수)가 필요하다.

이 변수는 렌더링에 사용되지 않으므로 ref를 사용한다.

 

2. DOM 요소를 조작할 때 사용한다.

See the Pen Untitled by dain (@dadain) on CodePen.

 

DOM요소(html코드)에 ref 속성으로 ref 를 전달하면, 리액트는 ref 객체의 current 에 DOM 요소를 저장한다.

그럼 focus() 와 같은 DOM을 조작하는 메서드를 호출해서 사용할 수 있다.

 

 

3) useEffect

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 라이프사이클과 관련된 훅이다.

useEffect에서 전달된 함수는 화면에 렌더링이 완료된 후에 수행된다. 

useEffect(()=>{}, [])
// ()=>{} : 렌더링 이후 실행할 함수
// [] : 의존성 배열
// 빈 배열이면 처음 렌더링 될때만(mount) 실행
// 배열값이 있는 경우, 배열값이 변하면(update) 실행
// 배열을 전달하지 않는 경우, 모든 렌더링(mount)과 리렌더링(update) 마다 실행

useEffect(())=>{
	console.log('mount & update')
    
    return () => {
    	console.log('unmount')
    } // return 시 반환하는 함수는 컴포넌트가 unmount 될 때 실행됨
}, [])

 

See the Pen useEffectpractice by dain (@dadain) on CodePen.

 

위의 코드에서 의존성 배열로 input 값을 넣어주었기 때문에, input 값이 변할때마다 update의 값이 변한다.

 

 

다음 포스팅에 이어서

https://daddda3232.tistory.com/76

[새싹x코딩온] 웹 개발자 부트캠프 과정 13주차 회고 | React Hooks(2)

 

 

 

 

3. Reference

1. 코딩온 강의 교안 및 실습

 

2. https://ko.legacy.reactjs.org/docs/hooks-overview.html

Hook 개요 – React

 

 

3. https://ko.react.dev/reference/react/hooks

내장된 React Hook – React