Hooks (useState, useRef, useEffect)

1. Intro

리액트에서는 클래스형이 아닌 함수형을 쓰라고 권장한다. Hooks와 함께 쓰면 간결한 코드 작성이 가능하다. (코드 수가 줄어듬)

하지만 클래스형을 아예 몰라도 되는가? NoNo! 과거 클래스로 코드를 짰던 팀에서는 class 코드가 잔재하기 때문에 알아두면 좋다.

 

Hooks는 use가 써져있는 것들을 말한다.

 

 

2. useState

 

1) class

state를 1개로 묶어줬다.

state가 변경될 때마다 render가 재렌더링 된다.

class GuGuDan extends React.Component{
	state = {
    	first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: '',
        result: '',
    }
};

 

 

2) functional

state를 구조 분해 할당(= 비구조화 할당)으로 1개씩 분리했다.

컴포넌트 안에 꼭 존재해야한다. 컴포넌트 밖으로 뺄 수 없다.

state가 변경될 때마다 컴포넌트가 재렌더링되어 느리게 동작될 수 있다.

const GuGuDan = () => { //구구단 컴포넌트
	const [first, setFirst] = React.useState(Math.ceil(Math.random()*9));
	const [second, setSecond] = React.useState(Math.ceil(Math.random()*9));
	const [value, setValue] = React.useState('');
	const [result, setResult] = React.useState('');
}

 

setState가 동기였다면 state값 하나만 바껴도 컴포넌트가 재렌더링되어서 포함된 모든 state가 재렌더링 되었을 것이다. 

하지만 비동기이기 때문에 setState를 모아서 딱 1번만 재렌더링 처리한다.

 

 

3. useRef

 

1) class

onSubmit = (e) => {
	e.preventDefault();
	this.input.focus();
}


input;
onRefInput = (c) => {this.input = c;};

render(){
	return(
    	<React.Fragment>
        	<input ref={this.onRefInput}/>
        </React.Fragment>
    )
}

 

 

2)functional

Dom에 접근할 때 current를 통해서 접근한다.

const inputRef = React.useRef(null);

const onSubmitForm = (e) => {
	//중략
    
    inputRef.current.focus();
    
    reuturn(
    	<React.Fragment>
        	<input ref={inputRef}>
        </React.Fragment>	
    )
}

 

 

참고 : useRef는 언제 사용하는가?

• 컴포넌트에 focus를 위치시킬 필요가 있는 경우
• 속성값을 초기화할 필요가 있는 경우 (setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모함)
• 리렌더링 하지 않으면서 컴포넌트의 속성 정보를 조회 & 수정할 경우 (예를 들어 scroll 위치)

[React] useRef() 는 언제 사용하는가?

 

 

 

 

-useEffect는 추후 추가할 예정 (아직 강의에 등장 안함)