TIL: 2022-10-11

⚙️ 오늘 배운 주제

React State 끌어올리기, Effect Hook

 

🐹 오늘의 기분

오랜만에 리액트를 공부했다. 네트워크 공부하느라 props랑 state를 다 까먹어서 다시 블로그를 찾아봐야 했다. 데이터 흐름이랑 컴포넌트는 분명 전에 배웠던 내용인 것 같은데 다시 보니까 또 새로웠다. 글로 읽을 때에도 무슨 소린지 모르겠었는데 코드를 보고 요구사항을 구현하려니까 더 무슨 소린지 모르겠어서 한참 헤맸었다. 페어분과 하는 실습 전에 했던 샌드박스 예제부터 뇌정지가 와서 예제 코드 하나하나 뜯어보면서 겨우 풀었다. 그래도 이 덕에 페어 활동을 수월하게 할 수 있었던 것 같다. 하지만 이걸 처음부터 내가 구현할 수 있을까? 하는 의문은 아직 사라지지 않는다... 여태 닥치면 다 해냈으니 앞으로도 그럴 것이라 믿으며 열심히 공부해야지 

 

🗝 키워드

State 끌어올리기, Side Effect, Effect Hook, 순수 함수

 

🗣 스스로에게 설명

React 단방향 데이터 흐름 React one-way data flow

React의 데이터는 부모에서 자식으로 하향식으로 흐른다! 

 

React로 프로젝트를 할 때에는 컴포넌트로 나눈 후 계층 구조로 나열해볼 것. 

계층 구조로 나눠본 후 state의 흐름을 도식화하면 효율을 높일 수 있다. 

하나의 컴포넌트는 한 가지 일을 하도록 구성해야 한다.

하나의 state에 영향받는 컴포넌트가 여러 개라면 그것들의 공통 상위 컴포넌트에 state를 정의한다. 

(사실 설명하기가 난해하다고 느껴져서 글로 어떻게 써야 할 지 모르겠다... )

 

이미지 출처

One Way Data Flow - React Training

 

State 끌어올리기 Lifting State Up

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때 필요

하위 컴포넌트가 부모 컴포넌트의 상태를 변화시키는 것

useState에서 정의한 상태 변경 함수를 하위 컴포넌트의 props로 전달한다. 

<Search onSearch={search} />

이런 식으로 props로 전달한다.

 

// Search 컴포넌트
function Search({ onSearch }) {
  //...
}

이제 Search 컴포넌트에서는 props명을 전달인자로 받는다. (중괄호 빼먹으면 안 됨)

Search 컴포넌트 내부에서 search 함수를 쓰고 싶다면 onSearch를 search 함수처럼 사용함. 

 

Effect Hook

어떤 함수의 구현 내용이 함수 외부에 영향을 미칠 때 해당 함수는 Side Effect(부수 효과)가 있다고 말한다.

부수 효과가 없는 함수를 순수 함수(Pure Function)라고 한다. 

Effect Hook은 부수 효과를 다루기 위해 React에서 제공하는 툴이다. 

 

React에서 Side Effect를 갖는 것은 1️⃣ 타이머 사용, 2️⃣ fetch API나 localStorage를 이용한 데이터 가져오기, 3️⃣ 이벤트를 활용한 DOM 조작이 있다. 

Effect Hook은 컴포넌트가 렌더링될 때마다 실행된다.

 

useEffect(함수, [종속성1, 종속성2, ...])

이렇게 쓰면 종속성 배열에 들어간 값이 변할 때마다 첫 번째 인자의 함수가 실행된다. 

 

종속성 배열에 아무것도 전달하지 않으면 Effect Hook은 컴포넌트가 렌더링될 때마다 실행된다.

하지만 빈 배열을 전달하면 Effect Hook은 최초 한 번만 실행된다. 

// 컴포넌트가 렌더링될 때마다 실행
useEffect(함수)

// 최초 한 번만 실행
useEffect(함수, [])

외부 API를 받아오고 더 이상 호출이 필요하지 않을 때 아래와 같은 방법으로 side effect를 다뤄줄 수 있다. 

 

Using the Effect Hook – React

 

❓ 막히는 or 막혔던 부분

테스트는 다 통과했는데 검색 버튼을 눌러도 필터링이 적용되지 않아서 의아했는데 구조분해할당 때문이었다. 

함수가 데이터를 어떤 자료형으로 전달받고 있고, useState의 상태 변경 함수가 어떤 데이터를 업데이트하는지 제대로 파악하는 것이 중요함을 깨달았음.