3주차 WIL

1. 라이프사이클(클래스형vs함수형)

함수형

function App() {
const name = 'react';
return

}

클래스형

class App extends Component {
render() {
const name = 'react';
return

}
}
1) class 키워드 필요
2) Component로 상속을 받아야한다.
3) render() 메소드가 반드시 있어야한다.

함수형과 클래스형 차이

클래스형 :

state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다.

함수형 :

state, lifeCycle 관련 기능사용 불가능(Hook을 통해 해결)
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.

라이프 사이클 클래스형

생성될 때 (마운트 될 때 - Mounting) : constructor, render, componentDidMount
업데이트할 때(Updating) : render, componentDidUpdate
제거할 때 (마운트 해제 될 때 - Unmounting) : componentWillUnmount

라이프 사이클 함수형

함수형 컴포넌트에는 "리액트 훅"이 있는데, 훅으로 함수형 컴포넌트들을 관리한다.클래스형 라이프사이클에 나왔던 모든 phases( componentDidMount, componentDidUpdate, componentWillUnmount)는 useEffect Hook에 의해 실행됨.

-생성될 때 (마운트 될 때 - Mounting) :

useEffect(() => {
 console.log(“ComponentDidMount”);
 }, []);

-업데이트할 때(Updating)

useEffect(() => {
 console.log(“ComponentDidMount & ComponentDidUpdate”);
 });

-제거할 때 (마운트 해제 될 때 - Unmounting)

useEffect(() => {
 return () => {
 console.log(“ComponentWillUnmount”);
 };
 }, []);

2. react hooks

Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 문제 발생. Class는 최근 사용되는 도구에서도 많은 문제를 일으킴. 예를 들어 Class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다.
이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제공해주고, Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 도와준다.

react에서 기본적으로 지원하는 hooks에는 useState(컴포넌트의 state관리), useEffect(렌더링 이후에 실행할 코드 만들 수 있음), useContext(부모컴포넌트와 자식 컴포넌트 간의 변수와 함수를 전역적으로 정의가능), useReducer, useRef(컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.), forwardRef, useImperativeHandle, useMemo, useCallback, useLayoutEffect, useDebugValue 등

발생했던 문제들

1. 수정하기 기능 구현할 때 필요한 데이터를 다 보내주지 않았다.

export function modifyWord(word_index, word_id, word_data) {
  return { type: MODIFY, word_index, word_id, word_data };
}
export const modifyWordFB = (word_id) => {
  return async function (dispatch, getState) {
    console.log(word_id.id, "id");
    const newWord = { word: word_id.word, desc: word_id.desc, ex: word_id.ex };
    console.log(newWord, "새로들어갈 단어");
    const docRef = doc(db, "homework", word_id.id);
    await updateDoc(docRef, {
      word: word_id.word,
      desc: word_id.desc,
      ex: word_id.ex,
    });
     // console.log(getState().homework.list);
    const _word_list = getState().homework.list;
    //                            스토어.list
    const word_index = _word_list.findIndex((w) => {
      return w.id === word_id.id;
    });
    // console.log(word_index, "요거확인!");
    dispatch(modifyWord(word_index, word_id.id, newWord)); // 수정할 아이디와 수정할 데이터를 전송해야 리덕스를 수정할 수 있음
    // 항해강의에서 하는거는 우리가 선택한 값을 true
  };
};

word_index, word_id, word_data 이렇게 3개를 보내준다.