211202 리액트 입문 - 리액트 훅 1

이제는 class형 컴포넌트는 안쓰고 hook을 주로 쓰고 있다!

 

*리액트 훅(hook) ? 
컴포넌트에 기능을 추가할때 사용하는 '함수'.
ex) 컴포넌트에 상태값 추가, 자식 요소에 접근.

리액트에서 제공하는 몇가지 훅이 있는데
1. useState - 상태값 추가
2. useEffect - 부수효과 처리 (외부의 상태를 변경하는 것) ex 서버 api 호출 / event handler 등록 해지 등
등등

*useState()
배열을 반환하는데, [상태값, 상태값 변경 함수

const [count, setCount] = useState(초기값);

상태값 변경함수는 비동기면서 배치로 동작한다.

import React, {useState, useEffect } from 'react';

export default function App(){
  const [count, setCount] = useState(0);
  function onClick(){
    setCount(count + 1);
    setCount(count + 1);
  }
  console.log('rendered');

  return {
    <div>
      <button onClick={onClick}>증가</button>
    </div>
   }
}

onClick일때 두개가 증가해야되는데 그렇지 않다.

    setCount(count + 1);
    setCount(count + 1);

효율적으로 렌더링하기때문에 여러 상태값 변경을 모아 배치로 처리되기 때문
-> 로그는 한번만 출력됨

왜 비동기/배치일까?
-> 계속 화면을 그리는 성능 이슈
그럼 동기로 처리하고 화면을 바로 그리지 않는다면?
데이터와 화면의 불일치

이를 위해선...

#상태값 변경함수를 함수로 사용한다.

ex)

function onClick(){
	setCount(v=>v+1);
	setCount(v=>v+1);
    // 처리되기 직전의 상태값을 매개변수로 받기때문에 원하는대로 동작한다.
}

 

onClick 핸들러는 리액트요소에 입력되어있기때문에 배치로 처리되는것
그렇지않고 리액트 관리하지않는 외부에선 호출되지 않는다.
-> 변경할때마다 렌더링이 발생할 것.

ex)

export default function App(){
	const [count, setCount] = useState(0);
	function onClick(){
		setCount(count + 1);
		setCount(count + 1);
	}

	useEffect(()=>{
		window.addEventListener('click',onClick);
        //이렇게 추가된 함수 호출 시?=>외부에서 처리, 배치로 실행되지 않음
		return ()=>window.removeEventListener('click',onClick);
	});
	console.log('rendered');

	return {
		<div>
			<button onClick={onClick}>증가</button>
		</div>
	}
}

만약 외부에서 처리할때도 배치로 처리하려면?

backedUpdate를 사용한다.
ex)

function onClick(){
	ReactDOM.unstable_backedUpdate(()=>{
		setCount(count + 1);
		setCount(count + 1);
	});
}

#상태값 변경함수는 변경한 순서대로 적용되기는 하지만
배치.. 변경할때는 순서가 의미가 없다.

#여러개의 상태값을 하나의 useState로 관리할 순 있다.
const [state, setState] = useStata({name: '', age:''});

그러나 여러개 관리할때는 useReducer가 더 적합하다.


# useEffect 훅.
모든 부수효과는 useEffect에서 처리하는게 좋다.
그렇지 않으면 복잡도 증가, 테스트 어렵고(순수함수의 장점 감소)

concurrent mode 로 동작한다면 렌더링이 취소될 수 있다.

import React , {useState, useEffect} from 'react';

export default function App(){
	const [count, setCount ] = useState(0);

	useEffect(()=>{
		default.title = '업데이트 수:${count}';
	});
	return <button onClick={()=>setCount(count+1)}>증가</button>
}

// useEffect 함수는 컴포넌트가 렌더링된 후 호출된다.
== 렌더링 결과가 실제 DOM에 반영된 후 비동기로 호출되는 것.

이 함수를 부수효과 함수라고 부른다.