[💻 코드스테이츠 FE 44기] State 끌어올리기(Lifting State Up), useEffect, 순수함수, 부수효과

✔️ 시작

State 끌어올리기 대해 학습했다. 이전 Javascript 콜백함수와 비슷한 개념으로
props를 사용하는 거 같다.

---

📍 배운 것

상태 끌어 올리기

• 상위 컴포넌트의 "상태를 변경하는 함수"그 자체를 하위 컴포넌트로 전달하고,
  이 함수를 하위 컴포넌트가 실행한다.
• 전달은 props를 이용한다.(props 이름 적절하게 지워주기)
• <ChildComponent>는 마치 고차 함수가 인자로 받은 함수를 실행하듯,
  props로 전달받은 함수를 컴포넌트 내에서 실행 할 수 있게 된다.
• "상태 변경 함수"는 버튼이 클릭 할 때 실행되길 원해 해당 부분에 콜백 함수를 실행한다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("초기값");

  const handleChangeValue = (value) => {
    setValue(value);
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent />
    </div>
  );
}

function ChildComponent({handleBtnClick}) {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀려면
    // 인자로 받은 상태 변경 함수를 실행한다.
    handleBtnClick('넘겨줄 자식이 원하는 값')
  };

  return <button onClick={handleClick}>값 변경</button>;
}

• <ChildComponent>는 고차 함수가 인자로 받은 함수를 힐행하듯, props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.
• "상태 변경 함수"는 버튼이 클릭할 때 실행되기 원해 해당 부분에 콜백 함수를 실행한다.

부수효과(Side Effect)

• 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 발생

let a = "hello";
function b(){
	a = "world";
}
b(); // b는 Side Effect를 발생시킨다.

순수함수(Pure Function)

• 오직 함수의 입력(매개변수)만이 함수의 결과에 영향을 주는 함수
• 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 주는 경우

function upper(str){
	return str.toUpperCase(); // toUpperCase는 원본을 수정하지 않는다.
}
upper("hello");

React 함수 컴포넌트

• props가 입력으로, JSX Element가 출력
  (그 어떤 Side Effect도 없고 순수함수로 작동된다.)
• React는 Side Effect를 다루기 위해 Hook인 Effect Hook을 제공한다.

function myList([a, b, c]){
	return(
    	<div>
      		<div>{a}</div>
            <div>{b}</div>
            <div>{c}</div>
      	</div>
    )
}

React 컴포넌트에서 Side Effect

• 타이머 사용 (setTimeout)
• 데이터 가져오기 (fetch API, local storage)

Effect Hook

• useEffect를 이용하며 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook

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

1. useEffect 첫번째 인자는 함수를 받는다.

• 해당 함수 내에서 Side Effect를 실행한다.
• useEffect(함수)인 경우
  - 컴포넌트 생성 후 처음 화면에 렌더링
  - 컴포넌트에 새로운 props가 전달되면 렌더링
  - 컴포넌트에 상태(state)가 바뀌면 랜더링
  - 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행된다.

이용시 주의사항

• 최상위에서만 Hook을 호출한다.
• React함수 내에서 Hook을 호출한다.

2. useEffect 두번째 인자는 종속성 배열이다.

• 배열은 조건을 담고 있다.(조건은 boolean 형태의 표현식이 아닌 어떤 값에 변경이 일어날 때)
  - 해당 배열이 "어떤 값의 목록"이 들어가고 이를 종속성 배열이라 한다.
• 배열 내의 종속성2의 값이 변할 때 첫번째 인자의 함수가 실행된다.

한 번만 실행되는 Effect 함수

//1. 빈 배열 넣기
useEffect(함수, [])
//2. 아무것도 넣지 않기(기본형태)
useEffect(함수)

컴포넌트 내부에서 처리

장점

• hTTP 요청의 빈도를 줄일 수 있다.

단점

• 브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되고, 클라이언트 부담이 늘어난다.

컴포넌트 외부에서 처리

장점

• 클라이언트가 필터링 구현을 생각하지 않아도 된다.

단점

• 빈번한 HTTP요청이 일어나게 되며 서버가 필터링을 처리하므로 서버가 부담을 가진다.

---

✏️ 마치며

상태 끌어 올리기는 봐도 봐도 정말 이해가 잘 안가는 부분 중 하나이다.
Javascript의 콜백 함수와 비슷한 맥락인듯 싶다.

과제를 진행하는데 문제의 답은 간단했지만
흐름 파악하는게 생각 보다 오래 걸렸다.

React의 흐름을 제대로 파악해야 다음 과제에도
쉽게 진행할 수 있지 않을까 싶다.