🗓 항해 99 3기에서 9/27 ~ 10/2 동안의 3주차 회고록

월 ~ 화 까지는 기본주차 과제를 마무리하고 제출하고, 수요일에는 자바스크립트랑 리액트 관련해서 공부를 하려고 했지만.. 과제 제출하고나니 끝냈다는 생각에 제대로 못했던 것 같다. 그렇게 기본주차를 마무리하고 목요일부터 새로운 팀원들과 심화주차가 시작되었다.

기본주차도 내용이 많다고 생각했는데 심화주차는 얼마나 많을까 걱정되었는데 정말 많다.

기본주차에서 async await을 쓸 때 제대로 이해하지 못하고, 그냥 응답이 올때까지 기다린다 정도로만 알고 넘어갔어서 따로 자료를 찾아서 봤지만 왜 써야하는지? 잘 느끼지 못했었다. 심화주차 강의를 들으면서 firestore에 데이터를 넘겨주고 그것을 다시 받아오고 하면서 .then .catch 구문을 많이 써보면서 비동기 후속처리를 어떻게 하는지에 대해서 알고 넘어갈 수 있었다.

심화주차 과제는 두 가지중 하나를 선택하는거였고 매운맛과제가 달력만들기인데 첨에 보자마자 재미있어보여서 무조건 강의를 다 듣고 달력을 만들어봐야겠다고 생각했다. 하지만 나의 오만방자한 생각이였다.. 오늘까지 일단 3주차 숙제까지 다들었는데 여기까지 오는 것도 내용이 너무 많아서 힘들었고, 복습도 제대로 하지 못했다. 그래서 내일까지 4주차를 다듣고 쫙 복습하면서 기본맛과제를 제대로 만들어보고 시간이 남으면 달력을 만들 것 같다.

심화과정에서는 그동안 컴포넌트를 만들었던 방식과는 또다르게 컴포넌트를 element단위로 나누어서 defaultProps를 주고, 상위 컴포넌트에서 그 값을 지정해주고 style을 변경해주었는데 이렇게 하면 컴포넌트를 재활용하기에 좋은 것 같다고 생각이 들었다.

그리고 creatorActios, immer 등 새로운 패키지를 써볼 수 있었다. 특히 immer는 처음 알게 되었는데 리듀서에서 state를 변경해줄때 불변성을 신경쓰지 않아도 되서 너무 편리했다.

내일은 4주차까지 다 듣고, 시간이 되면 2주차내용부터 복습을 하는 것이 목표이다. 그리고 화요일부터 제대로 복습을 하면서 과제를 만들어봐야겠다.

📌 이번주 핵심정리

1. 라이프 사이클

💡 한국어로 "생명주기 메서드"라고 부른다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.

React Lifecycle Methods diagram

• 1) Mount될 때 발생하는 생명주기들
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount

  1. constructor

     👉 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다.

  2. getDerivedStateFromProps

     👉 props로 받아온 것을 state에 넣어주고 싶을 때 사용한다. 참고로 이 메서드는 컴포넌트가 처음 렌더링 되기 전에도 호출되고, 그 이후 리렌더링 되기 전에도 매번 실행된다.

  3. render

     👉 컴포넌트를 렌더링하는 메서드

  4. componentDidMount

     👉 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태이다. 여기선 주로 DOM을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 ajax요청을 하거나, DOM의 속성을 읽거나 변경하는 작업을 진행한다.
• 2) Update될 때 발생하는 생명주기들
  • getDerivesStateFromProps : props나 state가 바뀌었을 때도 호출된다.
  • shouldComponentUpdate
  • render
  • getSanpshotBeforeUpdate
  • componentDidUpdate

  1. shouldComponentUpdate

     👉 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드. 주로 최적화할 때 사용하는 메서드이다.

  2. getSanpshotBeforeUpdate

     👉 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 `componentDidUpdate` 함수에서 받아와서 사용할 수 있다.

  3. componentDidUpdate

     👉 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드이다.
• 3) Unmount될 때 발생하는 생명주기들 👉 언마운트라는 것은, 컴포넌트가 화면에서 사라지는 것을 의미한다. 1. `componentWillUnmount` 👉 컴포넌트가 화면에서 사라지기 직전에 호출된다. 여기서는 주로 DOM에 직접 등록했었던 이벤트를 제거한다.

2. react hooks

💡 클래스형 컴포넌트에서 라이프 사이클 메서드를 통해 상태관리를 할 때 생기는 여러 문제를 해결하기 위해 클래스 없이 React 기능들을 사용하는 방법을 제시한 것이 Hook이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수이다. 클래스형 컴포넌트에서는 동작하지 않는다.

• State Hook
  • useState Hook을 사용해서 React state를 함수 컴포넌트 안에서 관리할 수 있다. 버튼을 누르면 숫자가 올라가는 간단한 코드를 작성해보았다.
    

        import React, { useState } from 'react';

        function Counter() {
          const [count, setCount] = useState(0); // 초깃값

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

1. useState를 사용할 땐 코드 상단에서 import해서 가져온다.
2. useState의 인자로 넘겨주는 것은 state의 초깃값이다. 위에서는 숫자 0을 초깃값으로 넣어주었다.
3. useState는 1) state변수, 2)해당 변수를 갱신할 수 있는 함수 이 두가지 쌍을 반환한다. 이것이 const [count, setcount] = useState() 라고 쓰는 이유이다.
   

• 자바스크립트의 배열 구조 분해 문법
  💡 ES6의 배열 구조 분해 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 구조 분해 할당의 대상(우변 값)은 이터러블(반복가능한)이어야 하며, 할당 기준은 배열의 인덱스이다. 즉, 순서대로 할당

    const arr = [1,2,3];

    // ES6 배열 구조분해 할당
    // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
    // 이때 할당 기준은 배열의 인덱스
    const [one, two, three] = arr;

    console.log(one, two, three); // 1 2 3

4. count변수의 값을 갱신하려면 setcount 함수를 호출해서 갱신할 수 있다. React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 보여준다.
   

• Effect Hook
  • useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정한 작업을 수행하도록 설정할 수 있는 Hook이다. 리액트는 우리가 넘겨준 함수를 기억했다가 DOM 업데이트를 수행한 이후에 이 함수를 불러낸다.
  • useEffect를 사용할 때는 파라미터로 1)첫번째는 함수, 2)두번째는 의존값이 들어있는 배열을 넣어준다.
  • 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로도 볼 수 있다.

1. 마운트 될 때만 실행하고 싶을 때
   useEffect에서 설정한 함수가 컴포넌트 화면에 가장 처음 렌더링될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주면 된다.
   → 이렇게 함으로써 react는 effect함수가 그 어떤 값에도 의존하지 않게 되므로 재실행하지 않는다.
   

    useEffect(() => {
      console.log('마운트 될 때만 실행됩니다.');
    }, []);

2. 특정 값이 업데이트될 때만 실행하고 싶을 때

   함수의 두번째 파라미터인 배열 안에 상태를 변경하고 싶은 값을 넣어준다.

   특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이되고, 지정한 값이 바뀔 때에도 호출이 된다. 그리고, 언마운트시에도 , 값이 바뀌기 직전에도 호출이된다.
   

3. 화면이 사라질 때

   useEffect에서는 함수를 반환할 수 있는데 이를 clean up 함수라고 부른다.
   의존성 배열을 비우게된다면 컴포넌트가 사라질 때 호출된다.