[새싹 프론트엔드] React Hooks 복습

새싹에서 배운걸 개인적으로 복습할 겸 요약정리해봤읍니다

틀린 내용있으면 댓글로 알려주시면 달게 받겠습니다

감사합니다 호호 

 

 

useState (가장 대표적인 hook중 하나)

const [state, setState] = useState(초기값)

→ 변수에 값을 저장하고, 값을 바꾸기 위해서

→ 값이 변경되면 화면에 랜더링됨

 

useRef() → 변수에 값 저장

차이점 : 변수의 값이 변경되어도 화면에 리랜더링이 되지않음

const state = useRef(초기값)

state ⇒ 객체로 만들어짐

state.current ⇒ 변수의 값이 저장되는 공간

 

useEffect()

useEffect(콜백함수, 의존성배열)

두번째 매개변수(의존성배열)는 옵션임 써도그만 안써도 그만

useEffect( ( ) => { 하고싶은 일 } ) : 렌더링 될 때마다 실행됨

useEffect( ( ) => { 하고싶은 일 }, [ 비어있는배열 ] ) : 최초에 렌더링(마운트) 되었을때만 콜백함수 실행

useEffect( ( ) => { 하고싶은 일 }, [ value ] ) : value 값이 변경되었을 때 콜백함수 실행

 

useMemo()

메모리에 “값”저장 / 사용방법 useEffect()하고 동일

useMemo(콜백함수, 의존성배열)

useMemo( ( ) => { 하고싶은 일(값을 메모리에 저장) } ) : 렌더링 될 때마다 실행됨

useMemo( ( ) => { 하고싶은 일(값을 메모리에 저장), [ 비어있는 배열 ] } ) : 최초에 렌더링(마운트) 되었을때만 메모리에 저장

useMemo( ( ) => { 하고싶은 일(값을 메모리에 저장),[ value ] } ) : value값이 변경될때만 메모리값을 저장

 

useCallback()

메모리에 “함수”저장

useCallback(콜백함수, 의존성배열)

useCallback( ( ) => { 하고싶은 일(함수를 메모리에 저장) } ) : 렌더링 될 때마다 실행됨

useCallback( ( ) => { 하고싶은 일(함수를 메모리에 저장), [ 비어있는 배열 ] } ) : 최초에 렌더링(마운트) 되었을때만 함수를 메모리에 저장

useCallback( ( ) => { 하고싶은 일(함수를 메모리에 저장),[ value ] } ) : value값이 변경될때만 함수를 메모리에 저장

 

useReducer()

useState하고 비슷함 (setState하고)

상태 변경 로직을 컴포넌트에서 분리 가능 → 재사용 가능하다

const [state, dispatch] = useReducer(reducer함수, 초기값)

state = 변수값

프로젝트가 커지면 커질수록 필수적인 요소!!

동작과정

1. dispatch( {key : value} ) : state의 값을 변경시키는 함수 (안에 {객체}) 넣어줘야함 원하는ㄷ ㅔ이터 맘껏 보낼수있음 key:value 여러개 넣기 가능
2. reducer함수가 실행 useReducer(abc,초기값) 이면 abc함수를 찾아감!!

function reducer(state,{action key : value}){
	// if문, switch문을 이용해서 action 분석 (일반적으론 switch많이 사용)
	switch(조건) {      //action.key1 
		case 결과1 :  // 하고싶은일 (state값을 새로운 값으로 변경)
		case 결과2 :
		default : 
	}
}

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅