프로그래밍 공부 노트

useEffect와 useLayoutEffect 둘의 사용법은 아래와 같다. useLayoutEffect 1 2 3 4 5 6 useLayoutEffect(()  = >  {   effect    return  ()  = >  {     cleanup   }; }, [input]) cs useEffect 1 2 3 4 5 6 useEffect(()  = >  {   effect    return  ()  = >  {     cleanup   } }, [input]) cs useEffect 와 useLayoutEffect을 확인해보면 동일한 형태로 사용된다. 하지만 둘의 차이점은 바로 실행 시점의 차이이다. useEffect 동작 순서 1. DOM 렌더링(레이아웃 배치 등) 2. useEffect 내부 로직 수행 및 state 값 업데이트 3. 업데이트 된 state 값으로 DOM 리렌더링 useEffect는 비동기적으로 실행된다. useLayoutEffect 동작 순서 1. useLayoutEffect 내부 로직 수행 및 state 값 업데이트 2. 업데이트 된 state 값으로 DOM 렌더링 useLayoutEffect는 동기적으로 실행된다.

React Hooks는 리액트에서 새로 도입된 기능으로 class형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 관리할 수 있도록 업데이트 되었다. 뿐만아니라 렌더링 직후 작업을 하는 componentDidMount와 같은 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주었다. 즉 기존에  클래스형 컴포넌트에서만 가능하던  생명주기를 hooks를 이용하여 함수형 컴포넌트에서도 사용할 수 있게 되었다. # useState useState을 사용하여 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 지닐 수 있게 되었다. import React , { useState } from 'react' const Counter = () => { const [ value , setValue ] = useState ( 0 ); const onPlusHandler = () => { setValue ( value + 1 ); } const onMinusHandler = () => { setValue ( value - 1 ); } return ( < div > < p > 카운터 < b > { value } </ b ></ p > < button onClick = { onPlusHandler } > plus </ button > < button onClick = { onMinusHandler } > minus </ button > </ div > ) } export default Counter useState을 사용하기 위해서는 useState를 import 해야 한다. 그리고 state 역할을 대신하는 다음의 코드를 보자. const [ ...