[TIL] Day34 #useEffect

2022.06.14(Tues)

[TIL] Day34
[SEB FE] Day34

☑️ React 데이터 흐름

➰ React 개발 방식은 컴포넌트 단위로 시작! (페이지 만들기 이전에, 컴포넌트 먼저 만들고 조립)

👉 ’상향식(bottom-up)’으로 앱 제작 (테스트 easy, 확장성 good)

➰ 데이터를 전달하는 주체는 ‘부모 컴포넌트 👉 데이트 흐름 ‘하향식(top-down)’

✅ React는 단방향 데이터 흐름(One-way data flow)

📎 State 끌어올리기(Lifting State Up)

상위 컴포넌트의 ‘상태를 변경시키는 함수(handler)' 그 자체를 하위 컴포넌트에 props로 전달하고, 이 함수를 하위 컴포넌트가 실행

// example
export default function ParentComponent() {
  const [value, setValue] = useState("Change Me!");

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

  return (
    <div>
      <div>값: {value}</div>
      <ChildComponent handleButtonClick={handleChangeValue} />
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick("Here! value!");
  };

  return <button onClick={handleClick}>Change Value</button>;
}

☑️ Effect Hook

📎 Side Effect (부수 효과)

함수 내에서의 어떠한 구현이 함수 외부에 영향을 끼치는 경우 Side Effect 발생

📎 Pure Function

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 의미 (입력으로 전달된 값 수정 ❌)
✋ 함수 입력이 아닌 다른 값이 함수 결과에 영향을 미칠 땐 순수 함수 ❌

• Side Effect 존재 ❌ (ex. 네트워크 요청)
• 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값 리턴 보장 👉 예측 가능 함수

✋ Ajax 요청은 외부 상태를 바꾸기 때문에 해당 기능을 가진 함수는 순수 함수 ❌

✅ React에서 React와 상관없는 API를 사용하는 경우 이는 Side Effect

👉 이러한 Side Effect를 React에서 다루기 위한 방법으로 Effect Hook 제공

📎 useEffect

컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook

🤷‍♀️ When 실행?

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링
  👉 매번 새롭게 컴포넌트가 렌더링될 때 Effect Hook 실행

✋ 최상위에서만 Hook 호출

✋ React 함수 내에서 Hook 호출

✋ 반복문, 조건문, 중첩된 함수 내에서 Hook 호출 ❌

➰ 종속성 배열 (dependency array)

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

• 2번째 인자는 배열(종속성 배열)로, 조건을 담고 있음

  • 조건: 어떤 값의 변경이 일어날 때 👉 어떤 값의 목록이 들어감
    • 배열 내의 종속성1 또는 종속성2.. 값이 변할 때, 1번째 인자 함수 실행

  // 2번째 인자에 아무것도 작성하지 않은 경우
  // 1. 컴포넌트 처음 생성, 2. props 업데이트, 3. state 업데이트 될 때마다 실행
  useEffect(() => {
      console.log("몇 번 호출?");
  })
  
  // 2번째 인자로 [] 빈 배열을 작성할 경우
  // 컴포넌트가 처음 생성될 때만 함수 실행
  // ex. 처음에 한번만 외부 API로 리소스 받아오고 더 이상 API 호출 필요하지 않을 때 사용
  useEffect(() => {
      console.log("몇 번 호출?");
  }, [])
  
  // 2번째 인자로 [num]을 작성할 경우
  // num이 업데이트 될 때마다 실행
  useEffect(() => {
      console.log("몇 번 호출?");
  }, [num])
  

➰ 로딩 화면 처리

const [isLoading, setIsLoading] = useState(true);

// fetch 전, 후로 setIsLoading 설정해주면 Good
useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

return (
	{isLoading ? <LoadingIndicator /> : <div>Loading Success Page</div>}	
)

---

✍️ 오늘 프로그래머스 쉬운 문제 2개 풀었다. 쉬운 문제도 엄연한 문제니까^^
🫠 점점 갈수록 React 개념이 혼동스럽다,, 오늘 별코딩, 한입 리액트 강의 좀 보다가 자야지