Today I Learned
[Front-End] - React
이 날은
useEffect와클래스형 컴포넌트, 그리고동적 라우팅에 대하여 배웠다.
Side Effect
컴포넌트가 렌더링 된 이후에
비동기적으로 처리되어야 하는 효과들을Side Effect라고 한다.
예를 들어 서버로부터 어떤 데이터를 가지고 오는 경우 화면을 구성하는 부분을 먼저렌더링하고, 그 다음 실제 데이터는비동기로 가져오게 된다.
이렇게 하면 API 응답이 늦어지거나 아예 응답이 없는 경우에도 이미 화면을 구성하는 부분은 렌더링이 되어 있기 때문에 좋은 사용자 경험을 제공할 수 있다는 장점이 있다.
컴포넌트의 생명 주기
컴포넌트는
생성될 때(Mount),생성된 상태(Updating),파괴될 때(Unmount)총 3가지의 상태 값을 가지게 된다.
컴포넌트가 생성될 때특정 작업(Side Effect)를 수행하고 싶다면useEffect에 작성하면 된다.
useEffect
useEffect의 형식은 다음과 같은데 (useEffect(() => {}, [])), 두번째 인자(배열)에는 추적하고 싶은 값을 입력한다.([], 이 배열은deps(dependencies; 의존성 배열)이라고 부른다. 이deps가 변하면useEffect를 다시 실행한다.
useEffect안에return은 클린업 함수라고 불리며 컴포넌트가 삭제될 때 실행된다.
클래스형 컴포넌트 vs 함수형 컴포넌트
클래스형 컴포넌트에서는
state를 통해 상태를 선언하고,this키워드를 통해 상태 값에 접근할 수 있게 된다. 리액트 16.8 이후Hooks의 등장으로 함수형 컴포넌트에서도 상태 값과라이프 사이클을 가지게 되었는데, 다음과 같은라이프 사이클이 있음.
이 글은 2023-04-04에 정리하고 2023-04-07에 작성한 글입니다.
