728x90

8주 2일차 - Effect Hook

1. 배운 것

데일리코딩 14번
자식이 부모 state 변경(역방향 데이터 흐름)
Side Effect
Effect Hook - 조건부 실행
클래스 복습 - 인스턴스 메서드, 정적 메서드
자료구조 - 단일 연결 리스트

2. 내용 정리

데일리코딩 14번

문제의 요구사항을 처음에 잘 이해하지 못했는데 reduce 메서드 없이 반복문으로 비슷한 기능을 한 문제였다. 조건문으로 false, 아니면 전부 true를 리턴.

리액트 역방향 데이터 흐름

하나의 컴포넌트는 하나의 일만 하게 만들어라.
두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치할것. 예시: 전체 트윗 목록을 상태로 가지는 부모 컴포넌트와 자식 컴포넌트들인 새 트윗폼과 기존 트윗목록인 자식 컴포넌트.
새 트윗폼은 완성된 후 새 트윗 객체를 전체 트윗 목록에 전달만 하면 된다. 다른 컴포넌트와 “입력중인 내용” 이란 상태를 공유할 필요 없음.
역방향 데이터 흐름: 상위 컴포넌트의 state 변경함수를 하위 컴포넌트로 전달하여 하위 컴포넌트에서 해당 함수를 실행하는 방법. (Lifting state up)
- 예시: 새 트윗 추가
- 하위 컴포넌트의 state를 상위 컴포넌트로 전달하는게 아니다!

useEffect

어떠한 상태(state)의 값이 바뀌었을때 동작할 함수를 작성할 수 있다.

첫번째 인자 콜백함수: 가장 처음에 앱이 실행될 때의 첫 렌더링 또는 state변경 후 재렌더링 종료시 실행됨.
두번째 인자 Dependency Array: 의존성 배열이다. 첫번째 매개변수인 함수가 두번째 매개변수인 의존성 배열의 값이 변경될 때만 실행되게 제한함. 생략 가능하며 생략시 모든 렌더링 때마다 함수가 실행됨.
의존성 배열이 빈 배열이면 함수를 최초 렌더링 시 1번만 실행.

조건부 effect 발생 - dependency array

의존성 배열이 생략된 경우, 빈 배열인 경우, 종속성 값이 의존성 배열에 존재하는 경우에 따라 콜백함수가 언제 실행되는지 알고 있어야 한다.

의존성 배열 생략: 모든 렌더링(컴포넌트 최초 생성, state 변경) 발생 시 콜백함수 실행
빈 배열: 최초 렌더링 시 1회만 콜백함수 실행 예시: → 최초 외부 API의 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 경우 사용.
종속성 요소 존재: 해당 요소의 값이 변할 때 콜백함수 실행

Side Effect(부수 효과)

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

즉 외부 환경에 영향을 받거나 외부 환경에 영향을 미치는 비순수함수는 부수효과를 가진다.

리액트에서는 AJAX요청(fetch api, localStrorage), 타이머 사용 (setTimeout) 등의 리액트와 상관없는 api를 사용하는 경우 모두 side effect로 본다. 리액트에서는 이러한 side effect들을 Effect Hook으로 다룬다.

Side Effect가 있는 함수는 useEffect의 콜백함수로 실행시킨다.
Math.random()이 순수함수가 아닌 이유: 동일한 입력엔 동일한 출력이 나와야 순수함수다.

컴포넌트 내에서의 AJAX 요청

로딩 상태 구현

삼항 연산자나 단축평가, 또는 if문으로 구현 가능. 자세한 내용은 8주 1일차 포스팅 참고.

fetch 요청부분 코드도 다시 확인해보기.

{/* 1. 로딩 완료 && 영화 목록이 있는 경우 */}
{!isLoading && movies.length > 0 && <MoviesList movies={movies} />}

{/* 2. 로딩 완료 && 영화 목록이 없는 경우 */}
{!isLoading && movies.length === 0 && <p>Found no movies.</p>}

{/* 3. 로딩 진행중 */}
{isLoading && <p>Loading movie datas...</p>}

클래스 - 인스턴스 메서드

class Student {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.count = 0;
				this.scores = [];
    }
    markLate() {
        this.count += 1;
				if (this.count >= 3) return console.log('당신은 제적되었습니다!');
        return console.log(`당신의 지각횟수: ${this.count}`);
    }
		addScores(subject, score) {
			this.scores.push(`${subject}: ${score}점`);
			return console.log('시험 점수가 저장되었습니다.');
	}
	seeScores() {
		return this.scores.forEach(e => console.log(e));
	}
}

const std1 = new Student('길동','홍');
std1.markLate(); // 당신의 지각횟수: 1
std1.markLate(); // 당신의 지각횟수: 2
std1.markLate(); // 당신은 제적되었습니다!
std1.addScores('영어', 100); // 시험 점수가 저장되었습니다.
std1.addScores('수학', 80);  // 시험 점수가 저장되었습니다.
console.log(std1.scores);   // ['영어: 100점', '수학: 80점']
std1.seeScores();
// 영어: 100점
// 수학: 80점

클래스 - static 메서드

static 메서드는 클래스의 인스턴스화 없이도 호출될 수 있으며 클래스 인스턴스를 통해서는 호출될 수 없다. (mdn)

// 예제 코드: mdn

class StaticMethodCall {
  static staticMethod() {
    return 'Static method has been called';
  }
  static anotherStaticMethod() {
    return this.staticMethod() + ' from another static method';
  }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'

단일 연결 리스트

연결 리스트의 각 노드는 두개의 필드로 구성된다.
1. 데이터 필드
2. 다음 노드를 가리키는 링크를 가진 필드

const singleLinkedList = {
  head: {
    value: 15,
    next: {
      value: 3,
      next: {
        value: 94,
        next: {
          value: 50,
          next: null,
        },
      },
    },
  },
};

singleLinkedList.head; // {value: 15, next: {…}}
singleLinkedList.head.next.value; // 3

참고 자료

유데미 자바스크립트 자료구조 알고리즘 강의(by Colt Steele)
제주코딩베이스캠프 연결리스트 유튜브 강의

3. 리뷰

3.1 좋았던 점

3.2 아쉬웠던 점

3.3 notes

4. 할 일

fatal: could not create leading directories of '경로': Permission denied
index.js에서 <React.StrictMode> 가 정의되어있으면 api call을 두번씩 한다
함수형 업데이트 https://velog.io/@suyeonme/react-useState의-비동기적-속성-함수형-업데이트