[React] React Hook 알아보기

 

React Hook이란?

React 버전 16.8부터 새롭게 추가된 요소로 복잡한 클래스 컴포넌트 내에서 상태와 생명주기를 관리하지 않고도, 함수 컴포넌트 내에서 상태 관리와 다른 기능들까지 모두 사용가능하게 해주는 것이 바로 React Hook이다.

 

 

Hook 유의사항

최상위(at the top level)에서만 Hook을 호출해야 한다.

if문, for문과 같이 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 왜냐하면 만약 if문안에 Hook이 있을 경우 조건에 만족하지 못하여 Hook을 건너뛰게 되면 항상 정해져있던 Hook의 호출 순서가 꼬이게 되어 예상치못한 버그가 발생할 수 있다.

 

오직 React 함수 내에서 Hook을 호출해야 한다.

React 함수 컴포넌트 내 또는 Custom Hook에서 Hook을 호출하여야 한다. 일반적인 자바스크립트 함수 내에서 호출은 하지 말아야 한다.

 

 

State Hook

useState

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

useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook이다. 최초에 useState가 호출될 때 state값은 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다.
state는 읽기 전용이므로 직접 수정이 불가능하고, setState 함수를 이용하여 state의 값을 바꿀 수 있다.
state의 값이 바뀌게 되면 자동으로 컴포넌트가 재 렌더링이 된다.

const App = () => {
	const [name, setName] = useState("");
    //name == "" 초기값
    
    setName("myeong");  //name == "myeong"
    
    setName((current) => {
    	return current + " coding"; //name =="myeong coding";
    }
}

 

Effect Hook

useEffect

const App = () => {
	useEffect(EffectCallback, Deps?);
}

useEffect는 함수 컴포넌트에서 side effect를 수행할 수 있다.
컴포넌트가 최초로 렌더링 될 때, 지정한 Deps(state나 prop)가 변경될 때마다 이펙트 콜백 함수가 호출된다.
만약 Deps에 빈 배열을 줄 경우 최초 렌더링 시에만 콜백 함수가 호출된다.

const App = () => {
	useEffect(() => {
    	console.log("안녕하세요");
    }, []);
    //App이 실행될 때 console에 안녕하세요가 찍힌다.
}

 

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