(S2W3) TIL 33일차 220317 (React, useEffect)

오늘의 학습목표

• Side effect가 어떤 의미인지 알 수 있다.
• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
  • Side effect의 예를 들 수 있다.
• Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
• Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
• 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

1. 스프린트 잘 이해하고 해결하기

2. Dinner Club에 참가해서 선배 기수분들로 부터 꿀팁 많이 얻기

3. 스터디 협업 잘 구성하기

 

학습내용

Side Effect (부수 효과)

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다.

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킵니다!

Pure Function (순수 함수)

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 순수 함수에는 Side Effect가 없습니다.

또한 순수 함수는, 입력으로 전달된 값을 수정하지 않습니다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'

 

React의 함수 컴포넌트

React의 함수 컴포넌트는 props가 입력으로, JSX Element가 출력으로 나갑니다.

여기에는 Side Effect이 없으며 순수 함수로 작동합니다.

function SingleTweet({ writer, body, createdAt }) {
  return <div>
    <div>{writer}</div>
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
}

 

React 컴포넌트에서의 Side Effect

1. 타이머 사용 (setTimeout)
2. 데이터 가져오기 (fetch API, localStorage)

React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공합니다.

 

useEffect

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

useEffect의 첫 번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 

useEffect의 두 번째 인자는 종속성 배열입니다. 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행됩니다. 배열 내의 어떤 값이 변할 때에만, effect가 발생하는 함수가 실행됩니다.

실행 시기

매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

Hook을 쓸 때 주의 사항

1. 최상위에서만 Hook을 호출합니다.
2. React 함수 내에서 Hook을 호출합니다.

오늘의 회고

오늘은 처음으로 Dinner Club을 들어가봤습니다. 선배 기수님들과 소통하면서 정말 얻은 부분이 많고 뭔가 초심을 찾은 느낌이 들어서 굉장히 의욕이 생겨서 좋았습니다. 앞으로도 계속 매달 참여할 예정입니다! 그리고 또 오늘 낭낭코딩 스터디와 함께 저희만의 Dinner Club을 만들어보자해서 다음주 일요일부터 진행시간, 방식을 계획했는데 괜찮게 풀린것 같아서 성취감있는 하루였던 것 같습니다. 하지만 요즘 좀 늦게자고 아침에 집중을 못하는 부분에 대해서는 좀 스스로가 반성을 해야할 것 같다고 느꼈고 앞으로 좀 더 컨디션 관리를 좀 더 잘해야겠다고 생각했습니다. 그리고 요즘 블로깅도 자꾸 밀리고 있는데.. 밀리지 않도록 더욱 더 신경을 쓸 예정입니다! 내일도 파이팅하고 이번주 주말도 열심히 공부해 이번주 잘 마무리해보겠습니다 ㅎㅎ