[항해99] WIL 4

항해99 22일차	2022. 5. 30.(월)	주특기(React) 숙련 주차 CS 리덕스 세션(20시)	D반 - React 숙련, 개인 및 팀 과제 계속        - CS, 챕터 20~21
항해99 23일차	2022. 5. 31.(화)	주특기(React) 숙련 주차 CS	D반 - React 숙련, 개인 및 팀 과제 계속        - CS, 챕터 22
항해99 24일차	2022. 6. 1.(수)	주특기(React) 숙련 주차 CS 항해톡	D반 - React 숙련, 개인 및 팀 과제 계속        - CS, 챕터 24~25
항해99 25일차	2022. 6. 2.(목)	주특기(React) 숙련 주차 CS	D반 - React 숙련, 팀과제 리뷰 및 완료        - CS, 챕터 26
항해99 26일차	2022. 6. 3.(금)	주특기(React) 심화 주차 시작  CS	D반 - React 8조(4명), 리액트 심화반 강의 듣기,           개인 과제 뼈대 만들기        - CS, 챕터 27, 발표(내일) 준비
항해99 27일차	2022. 6. 4.(토)	주특기(React) 심화 주차 CS	D반 - React 심화, 강의 듣기 및 개인 과제 계속        - CS, 챕터 28(발표)
항해99 28일차	2022. 6. 5.(일)	Weekly I Learned 작성, 개인 공부, CS 책 읽기

 

22일 차,

CS (내용이 점점 어려워져서 나를 포함한 조원들이 발표 준비에 시간을 더 소요하고 부담을 느끼는 중)

개인과제 계속.

 

개인과제 기본 조건 완료. 추가 조건(수정, 삭제) + CSS 계속. 

my issue 1) 수정 구현이 안 되는데, 강의에선 false를 true로 바꾸는 것만 해본 상황이라,.. 데이터 변경은 어떻게 해야 할지 모르겠음.. 

my issue 2) 삭제는 기능 구현은 되는데 메인 페이지에서 새로고침해야 삭제 사항이 반영됨.

my issue 3) CSS 안 끝남(edit 페이지에서 수정하기, 삭제하기, 뒤로가기 버튼 수정 요망)

 

리덕스 세션은 집중하지 못해서, 녹화본 다시 들어야..

23일 차, 

삭제 기능 구현 제대로 했고(미들웨어 부분에서 파일이름 잘못 붙인 탓), 

CSS 마무리!

피곤..

24일 차,

수정 기능 구현은 했는데, 이번엔 수정된 값이 새로고침해야 반영되는 문제 발생.

이것저것 공부.

매우 피곤..

 

리액트 로드맵 세션.. 1시간 듣다가, 항해톡 보러 조금 일찍 나옴!

우리 조 조장의 항해톡 발표!!! 완전 잘해!! GOOOOOD

너무너무 피곤해서 11시에 잠자러 . . !

25일 차 ,

평소보다 조금 더 잤더니, 피곤이 조금 해소. 

CS, 불참자 1명 발생! =ㅁ=!

 

수정 기능 구현 제대로 완료! => 지훈님의 도움!!

//<update 관련>
//미들웨어에 window.location.reload() 안써도 변경 반영됨!
//원인: 리듀서에서 id 값만 불러오고 있었음.
//해결: 미들웨어에서 map 함수로 모든 요소값 업데이트하고, 리듀서에서 액션된 리스트 불러오기!

export const updateBucketFB = (f) => {
  return async function (dispatch, getState) {
    console.log(f);
    //파이어베이스에서 수정할 document 가져오기
    const docRef = doc(db, "word", f.id);

    //수정
    await updateDoc(docRef, {
      word: f.word,
      explain: f.explain,
      example: f.example,
    });
    // window.location.reload(); // 페이지 새로고침 기능 추가로, 수정하기 눌러서 메인페이지 오면 수정된 리스트 반영되게 함.
    //getState()를 사용해서 스토어의 데이터 가져오기
    const _word_list = getState().bucket.list;
    //바뀐 데이터로 리스트 변경
    const word_index = _word_list.map((b) => {
      if (b.id === f.id) {
        return {
          id: f.id,
          word: f.word,
          explain: f.explain,
          example: f.example,
        };
      } else {
        return b;
      }
    });
    // console.log(word_index);
    dispatch(updateBucket(word_index));
  };
};

리듀서도 고쳐야 했음!

case "bucket/UPDATE": {
      const new_word_list = [...action.bucket_idx];
      return { list: new_word_list };
    }

리듀서 연습. 리듀서 적용부터 추가, 삭제 기능 등을 연습.

 

이번 조도 무난히 잘 지냄! GOOD!

26일 차,

CS, 내일 발표... 리듀서 연습한다고 리액트로 발표 자료 만들었는데, 괜한 짓이었다. 내일 발표할 내용은 중요한 개념이 많은데, 설명을 잘할 수 있을지 걱정.

 

조장이 되었다..... CS 스터디 조장이라 안 될 거라 믿었는데, 말도 안 돼.....

리액트 심화반 강의를 듣기 전에, 개인 과제 뼈대 만들었다. 구현할 기능이 너무... 많다. 언제 다하지?

강의 1-1~2-4까지 들음. 개념 설명이라, 과제해야 하는 부분부터 듣고 나중에 들어도 되긴 하나, 몰랐던 부분을 알게 되어 좋은 것 같아서 그냥 순서대로 듣기로 결심ㅎ

 

https://writingcode.tistory.com/52

https://writingcode.tistory.com/53

27일 차,

CS 발표.

강의 듣기 계속, 개인 과제 계속(어렵다ㅜㅜ)

강의가 뚝뚝 끊긴다. 왜 그럴까...?

3-10 강의 영상 뒷부분 잘렸는데, 아무도 이의 제기 없어서 나도 하지 않기로 한다ㅋ

---

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

 

라이프 사이클(= 컴포넌트 생명주기): 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

 

Lifecyle : Mount / Update / Unmount

constructor()

👉 생성자 함수라고도 함. 컴포넌트가 생성되면 가장 처음 호출됨.

 

render()

👉 컴포넌트의 모양을 정의! 여기에서도 state, props에 접근해서 데이터를 보여줄 수 있음.

render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋습니다.

즉, state나 props를 건드려 데이터를 수정하려고 하면 안 됩니다!

 

componentDidMount()

👉 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현. DidMount()가 첫 렌더링 후에 호출되는 함수.

didMount() = 마운트 완료. 이 함수는 첫 번째 렌더링을 마친 후에만 딱 한 번 실행. 컴포넌트가 리렌더링할 때는 실행되지 않음. 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리. 또, 이미 가상돔이 실제 돔으로 올라간 후니까 DOM 관련 처리를 해도 됨!

 

componentDidUpdate(prevProps, prevState, snapshot)

👉 DidUpdate()는 리렌더링을 완료한 후 실행되는 함수.

이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState입니다. 각각 업데이트되기 전 props, state예요. 이전 데이터와 비교할 일이 있다면 가져다 쓰기. DidUpdate()가 실행될 때도 가상돔이 실제 돔으로 올라간 후니까 DOM 관련 처리를 해도 됨!

 

componentWillUnmount()

 👉 컴포넌트가 DOM에서 제거될 때 실행하는 함수. 만약 우리가 스크롤 위치를 추적 중이거나, 어떤 이벤트 리스너를 등록했다면 여기에서 꼭꼭 해제를 해줘야 함. 컴포넌트 없이 이벤트만 남겨둘 순 없음!

 

리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장!

==> 이제 클래스형 컴포넌트는 잘 쓰지 않지만, 아직 사용 중인 회사가 많기에 읽고 수정할 정도는 알아야 함.

(공식문서)https://ko.reactjs.org/docs/state-and-lifecycle.html

---

#react hooks

리액트 사용할 때, 함수형 컴포넌트를 사용한다면 '리액트 훅'을 사용한다.

리액트 훅(React Hook)이란?

=> 함수형 컴포넌트에서 React state와 생명주기(lifecycle) 기능을 “연동(hook into)“할 수 있게 해주는 함수.

=> React 버전 16.8(2018년도 추가)부터 새로 추가됨.

 

리액트 훅(React Hook) 특징은?

=> Hook은 class형 컴포넌트 안에서는 동작하지 않음.

=> (선택적 사용) 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용 가능.

==> 당장 Hook이 필요 없다면, Hook을 사용할 필요 없음.

=> 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것이 가능.

=> useState 같은 내장 Hook 제공.

=> Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있음.

✌️ Hook 사용 규칙

• **최상위(at the top level)**에서만 Hook 호출. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook 호출. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 된다.

🔌 내장 Hook

useState : state를 함수 컴포넌트 안에서 사용할 수 있게 해줌.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);
  
  //count라고 부르는 state 변수를 선언하고 0으로 초기화합니다. 
  // React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. 
  //count 변수의 값을 갱신하려면 setCount를 호출하면 됩니다.

useEffect : Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있음.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useRef : .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

const refContainer = useRef(initialValue);

 

useContext : 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줌.

function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}

useReducer : 복잡한 컴포넌트들의 state를 reducer로 관리

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...

💡 나만의 Hook 만들기

Custom Hook은,

=> 기능이라기보다는 컨벤션(convention)에 가깝다.

=> 이름이 ”use“로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있다. 

=> useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 한다.