Unit9 회고

React 데이터 흐름

컴포넌트 내부의 데이터 흐름

🔆 React 데이터 흐름

React 개발 방식😎

React는 페이지 단위가 아닌 컴포넌트 단위로 시작하여 페이지로 조립해나가는 상향식 방식을 채택한다. 이를 사용하면 테스트가 쉽고 확장성이 좋다는 장점을 가진다. 이러한 컴포넌트를 디자인 할 때에는 "하나의 컴포넌트는 한 가지 일만 한다"는 단일 책임 원칙을 따른다.

데이터 위치 결정❓

• 데이터 흐름은 하향식
  • 데이터를 전달해주는 주체는 부모 컴포넌트이며 자식 컴포넌트는 데이터를 받음
  • 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자나 속성처럼 받을 수 있음
• 단방향 데이터 흐름
  • 데이터 정의
    • 상태로 둘 것인지 아닌지 판단
  • 상태 위치 정하기
    • 하나의 상태에 두 개 이상의 컴포넌트 접근 시 공통 소유 컴포넌트를 찾아 상태를 위치시켜야 함
• 역방향 데이터 흐름 추가
  • 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우가 발생
  • 이 문제를 해결할 수 있는 방법이 'State 끌어올리기(Lifting State Up)'
    • 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달하여 해결할 수 있음

🔆 State 끌어올리기

상태 끌어올리기(Lifting State Up)

State 끌어올리기란 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우 단방향 데이터 흐름 원칙에 어긋나므로 이에 부합할 수 있도록 해주는 하나의 방법이라고 할 수 있다. 상태 끌어올리기는 상위 컴포넌트에서 상태를 변경하는 함수를 정의하고 하위 컴포넌트에서 상태를 변경하는 함수를 실행하는 방식으로 수행된다.

Effect Hook

React 컴포넌트 외부에서 데이터 처리하고 받아오기

🔆 Side Effect

Side Effect(부수 효과)🧐

함수 내에서의 어떠한 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side effect가 있다고 말한다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 side effect가 발생했다고 말할 수 있는데 이를 다루기 위한 hook이 Effect Hook이다.

• React에서 side effect 발생 예시: 타이머 사용(setTimeout), 데이터 가져오기(fetch API, localStorage) 등

🔆 Effect Hook 기본

• Effect Hook 실행 조건: 새롭게 컴포넌트가 렌더링 될 때 실행
  1️⃣ 컴포넌트 생성 후 처음 화면에 렌더링
  2️⃣ 컴포넌트에 새로운 props가 전달되며 렌더링
  3️⃣ 컴포넌트의 상태가 바뀌며 렌더링
• ❗️Hook 사용 시 주의할 점❗️
  • 최상위에서만 hook 호출할 것
    • 반복문이나 조건문에서 호출할 수 없음
  • React 함수 내에서 hook 호출할 것

🔆 Effect Hook 조건부 실행

useEffect 사용🤔

useEffect의 첫 번째 인자는 함수, 두 번째 인자는 배열이 들어가는데 배열은 조건을 담고 있다. 특이한 점은 이 조건이 표현식이 아니라 어떤 값의 목록이 들어간다는 점이다. 이러한 배열을 종속성 배열이라고 부르며 여기에 들어가는 조건은 어떤 값의 변경이 일어날 때라는 것을 의미한다.

useEffect의 인자

• useEffect(함수): 컴포넌트가 처음 생성되거나, props나 state가 업데이트 될 때마다 실행
• useEffect(함수, []): 컴포넌트가 처음 생성될 때 (한 번만) 실행
  • 대표적으로 처음 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때 사용
• useEffect(함수, [deps]): deps가 업데이트 될 때마다 실행

🔆 컴포넌트 내에서의 AJAX 요청

• useEffect를 사용한 data fecthing

  	장점	단점
  컴포넌트 내부에서 처리	HTTP 요청 빈도를 줄일 수 있음	브라우저 메모리 상에 많은 데이터를 갖게 되므로 클라이언트의 부담이 늘어남
  컴포넌트 외부에서 처리	클라이언트의 부담이 줄어듦	빈번한 HTTP 요청으로 서버의 부담이 늘어남

  • 컴포넌트 내부에서 처리 -> 클라이언트가 부담
  • 컴포넌트 외부에서 처리 -> 서버가 부담

알아두면 좋을 React 관련 개념

🔆 Class Component

class component🤓

React에서의 component에는 class component와 function component가 있는데 class component는 life cycle 메서드를 제공하는 등 여러 기능들로 React 초기 버전에서 많이 사용했지만 이후 hook을 통해 function component를 개선하여 주로 사용하게 되면서 class component는 거의 사용하지 않게 되었다. function component와의 가장 큰 차이점은 React의 모든 class component는 React.component를 상속받아 만들어진다는 점이다.

Function Component와 Class Component의 기능 비교

function component	class component
state 사용 불가	생성자에서 state를 정의
Lifecycle에 따른 기능 구현 불가	setState()함수를 통해 state 업데이트
Hooks	Lifecycle methods 제공

🔆 state와 생명주기

React Class Component의 생명주기🥸

• Mounting(출생): 컴포넌트가 생성되는 시점
• Updating(인생): 컴포넌트의 변화로 여러번 렌더링 되는 시점
  • props가 변경되거나 setState() 함수 호출에 의해 state가 변경되거나 forceUpdate()라는 강제 업데이트 함수 호출에 의해 컴포넌트가 다시 렌더링 되는 시기
• Unmounting(사망): 컴포넌트가 사라지는 시점
  • 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 되는 시기

    즉, 컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라지게 되는데 이는 function component도 마찬가지이다.

대표적인 Life cycle methods(참고)

• 생명주기에 따라 호출되는 Class Component의 생명주기 함수
  • Mounting: componentDidMount
    • 컴포넌트가 생성되어 렌더링된 직후 componentDidMount 호출
  • Updating: componentDidUpdate
    • 갱신되어 렌더링된 직후 componentDidUpdate 함수 호출
  • Unmounting: component WillUnmount
    • unmount 직전 component WillUnmount

🔆 React hook

Hook🪝

hook은 갈고리를 의미하는데 React에서는 React의 state와 생명주기에 갈고리를 걸어 원하는 시점에 정해진 함수가 실행되도록 만들었는데 이 때 실행되는 함수가 hook이라고 한다.

• useState: state를 사용하기 위한 hook
  • class component에서는 setState() 함수 하나로 모든 state 값을 업데이트 가능하지만 function component에서는 변수 각각에 대해 set 함수가 따로 존재함
• useEffect: side effect를 수행하기 위한 hook
  • React의 function component에서 side effect를 실행할 수 있게 해주는 hook
  • 생명주기 함수와 동일한 기능을 수행
  • 종속성 배열 안에 있는 변수가 하나라도 변경되면 effect 함수 실행

참고
한빛미디어-처음 만난 리액트
React-state와 생명주기
React-component와 props
React-React.component

<오늘의 일기>
점점 더 어려울 일만 남았다는 크루분의 말씀처럼 정말 갈수록 쉽지 않다는 생각이 들었다...ㅎ 항상 생각하는 점이지만 나는 개념적인 부분을 이해하는 것은 어느 정도 잘 수행하고 있지만 실제로 활용하는 측면에서는 조금 취약한 부분이 있다는 생각이 들었다. 또한 이해하고 활용할 수 있는 부분임에도 불구하고 주어진 문제를 해결해야 한다는 마음이 앞서 구조를 꼼꼼히 살펴보지 않고 무턱대고 풀어가다 생각이 꼬이는 경우도 생각보다 많다는 것을 깨닫게 되었다. 앞으로는 활용적인 측면도 중요하지만 우선 내가 파악할 수 있는 부분에 한해서는 최대한 꼼꼼하게 살펴보고 그 다음 문제를 해결해 나가는 습관을 들여야겠다.