React에서의 DOM TREE

DOM

DOM은 논리트리를 의미한다.

컴포넌트

앨리먼트의 집합

앨리먼트

요소

 

사이드 이펙트 = 부작용

리액트에서는 부수효과라고 볼 수 있다. (그렇게 해석하자)

 

useState

상태 값을 관리해주는 훅

useEffect

컴포넌트 사이드 이펙트 다루기, dependency array에 따라 언제 언제 호출되는지를 설정 가능

Custom Hooks

만약 훅이 반복되는 상황이면 이를 Custom Hook으로 커스텀할 수 있다.

 

hook flow 이해하기

hook들의 호출 타이밍을 각 hook에 콘솔 디버깅 창을 통해 순서를 확인할 수 있다.

로컬스토리지에서 값을 꺼내거나, 값을 가져오는데 시간이 걸리는 경우 useState나 useEffect에서 return을 사용하여 lazy initialize를 할 수 있다.

 

useState에 함수로 값을 넣어줄 수 있다.

useState(()=> {

return 결과

}

 

다음과 같은 명령문을 통해 딜레이를 줄 수 있고, 버퍼가 걸려 값을 못 가져올 수도 있는 가능성이 있는 곳에 함수를 전달함으로써 그 리턴값을 기초값으로 설정할 수 있다.

 

컴포넌트 사이드 이펙트 다루기

사이드 이펙트 : 부정적인 의미가 아닌 부수 효과

useState : lazy initialize (useState 초기 값 안에 함수를 넣어줌으로써 딜레이를 시켜줄 수 있다)

useState에 lazy initialize를 왜 사용할까?

로컬 스토리지에서 값을 가져올 때, I/O에 대한 딜레이가 있을 수 있기 때문에 그 값을 바로 가져오는 것에 어려움이 있을 수 있어 lazy initializt를 사용하여 간격(딜레이)를 부여함으로써 안전하게 사용할 수 있도록 해준다.

 

TIP

useEffect - dependency array

빈배열 : 렌더링 후 한번만 동작한다.

배열 안에 변수 : 배열 안의 변수가 변경될 떄마다 동작한다.

depedency array를 아무것도 안주면 뭐든 변화에 다 동작한다.

 

커스텀 훅 만들기
반복 : 함수로 반복을 했다.

훅들이 반복 : custom Hook으로 반복

 

hook flow 이해하기

hook flow : 말 그대로 hook들의 호출 타이밍

useState : setState시 내부에서 prev가 주입되기 때문에, setState(!state)와 같이 사용이 가능하다.

 

hook flow 이해하기 2

useEffect : render가 끝난 뒤에 실행이 되어진다.

useEffect Clean up : useEffect에 return(반환)을 해줌으로써, clean up 을 실행해준다. 단, 첫 useEffect에서는 실행이 되지 않는다.
dependency array : 전달받은 값의 변화의 있는 경우에만 동작을 할 수 있게 해준다.