[WIL] 항해99 4주차 (2022-01-31~2022-02-06)

4주차 회고록

• 항해99를 시작한지 벌써 4주차, 주특기 숙련 주차가 끝났다. 입문 주차는 생각보다 쉽고 재밌다고 생각했는데, 숙련주차부터 리덕스를 사용하면서 약간의 어려움은 있었지만?🤣 잠깐이였고, 배우는 재미가 쏠쏠하다. 리덕스가 리액트의 짝꿍 같은 존재라던데 배워보니 알것 같다. 상태 관리하는데 아주 효율적인듯?ㅎㅎ 4주차 과제도 무리없이 만들어서 제출했고, 팀원들이랑 팀 과제를 하면서 또 새로운 내용을 공부하고 배웠던 한주였다.(팀원분들이 다들 워낙 잘하셔서 다시한번 잘하고 싶다는 동기부여가 됬당👍)
• 이제 5주차 심화 과정인데.. 강의를 보기만해도 현기증 나지만 지금까지도 재밌어하는 나를 보면 어려워도 그건 잠시일것 같고 신기해하면서 또 재밌게 공부할것 같다.ㅋㅋㅋㅋㅋㅋㅋㅋ역시 공부는 재밌는걸 하는게 짱인듯😁

💡 이번주 WIL 키워드

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

• 모든 리액트 컴포넌트에는 라이프사이클(생명주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작해 페이지에서 사라질때 끝난다.
• 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.(함수형 컴포넌트 사용X), 대신 함수형 컴포넌트는 Hooks 기능을 사용해 비슷한 작업을 처리 가능하다.
• 라이프 사이클 메서드 종류는 총 9개 존재한다. 이 중에서 3가지의 카테고리로 나뉘는데, 생성이 될 때(Mount), 업데이트 될 때(Update), 사라질 때(Unmount)이다.

✍️ 마운트(Mount)

• DOM이 생성되고 웹브라우저상에 나타나는 것
  

1. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

2. getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드

3. render: 우리가 준비한 UI를 렌더링하는 메서드

4. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

✍️ 업데이트(Update)

• 컴포넌트는 총 4가지 경우에 업데이트한다.
  1. props가 바뀔때
  2. state가 바뀔때
  3. 부모 컴포넌트가 리렌더링될 때
  4. this.forceUpdate가 강제로 렌더링을 트리거할때
  트리거(Trigger): 어느 특정 동작에 반응해 자동으로 필요한 동작을 실행하는 것

1. getDerivedStateFromProps: 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.

2. shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드, 이 메서드에서는 true 혹은 false 값을 반환해야 하며, true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지한다. 즉, 컴포넌트가 리렌더링되지 않는다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 바로 render 함수를 호출한다.

3. render: 컴포넌트를 리렌더링

4. getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드

5. componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

✍️ 언마운트(Unmount)

• 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것
  

• componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

💡라이프사이클 정리

• 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을때마다 실행하는 메서드
• 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용

2. React Hooks

• Hooks는 리액트 v16.8에 새로 도입된 기능
• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 한다.

✍️ useState

• 가장 기본적인 Hook

• 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

• 함수형 컴포넌트에서 상태를 관리해야 할때 사용

✍️ useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

• 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방하다.

✍️ useReducer

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook

• 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

• useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요가 없다. 심지어 객체가 아니라 문자열이나 숫자여도 상관없다.

✍️ useMemo

• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

• 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식

✍️ useCallback

• useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데, useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

• useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다.

✍️ useRef

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

• useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.