[항해99 28일차] (22.04.03) WIL_주특기 숙련 마감, 주특기 심화 시작

항해99는 매주 일요일을 일주일 중 유일한 휴일로 두고 있다. 

그렇지만 마냥 쉬는 건 아니고... WIL 을 작성하며 1주 간 공부한 것을 회고하도록 한다.

 

4월 1주 WIL (Weekly I Learned) 를 정리해본다. 

 

 

이번 주 이해한 것

React 개념

[알고가기] 가상돔이란? 

DOM은 html 단위 하나하나를 객체로 생각하는 모델.
예를 들면 'div'라는 객체는 텍스트 노드, 자식 노드 등등 하위의 어떤 값을 가지고 있음.
이런 구조를 트리 구조라고 함.

가상돔은 메모리 상에서 돌아가는 가짜 DOM 

가상돔의 동작 방식 : 기존 DOM과 어떤 핸동 후 새로 그린 DOM(가상돔에 올라갔다고 표현함)을 비교해서 정말 바뀐 부분만 갈아끼워 넣어줌. 

DOM 을 새로 그리는 경우
 - 처음 페이지 진입 시
 - 데이터 변경 시

 

1. LifeCycle Method  라이프사이클

• 한국어로 "생명주기 메서드" 
• 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들임
• 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있음

 

출처:  http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라짐
• 생성은 처음으로 컴포넌트를 불러오는 단계
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됨
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계

 

 

2. React Hooks

• React 버전 16.8부터 React 요소로 새로 추가된 개념
• Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수임
• Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있음
• React는 useState 같은 내장 Hook을 몇 가지 제공함.

 

 

1) useState

• 함수 안에서 Hook을 호출하여 컴포넌트 안에 state 를 추가, 유지, 변경할 수 있도록 하는 메서드
• 하나의 컴포넌트 내에서 State Hook을 여러 개 사용하여 여러 state 변수를 선언할 수도 있음

 

• state 변수 선언하기

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

- useState를 호출하는 것은 "state 변수"를 선언하는 것임
- useState()Hook의 인자로 넘겨주는 값은 state의 초기 값. 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있음.
- state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환함. 이런 자바스크립트 문법을 "배열 구조 분해"라고 함.
※[참고] 배열 구조 분해
- React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공함

 

• state 가져오기 

  <p>You clicked {count} times</p>

 

• state 갱신하기

<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

 

 

2) useEffect

• useEffect는 함수 컴포넌트 내에서 side effect 를 수행하게 해줌

※ side effects(또는 effects) ? 
 - React 컴포넌트 안에서 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 작업 등의 기능들(operations)을 총칭하는 말

• React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것
• 예제 (React 가 DOM 을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트)

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

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

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  
  	return () => {
        // 여기가 clean up 부분
        // componentWillUnmount 과 비슷
        // do something ...
    };
  });

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

 

• useEffect 가 하는 일 
  • React에게 effect 함수를 전달하여, 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지를 말해줌
  • React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부름) DOM 업데이트를 수행한 이후에 불러냄

 

•  useEffect를 컴포넌트 안에서 불러내는 이유
  • useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됨. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것임.

 

•  clean up 을 하는 이유
  • 이벤트는 한 번 등록되면 사라지지 않고 계속 남아있음.
  • 만약 컴포넌트가 사라졌는데, 이벤트가 계속 남아있다면 메모리 누수가 발생하므로, 정리하는 것이 필요함.
  • clean up 은 함수의 return 

 

 

회고

1. LifeCycle, Hook 은 2주 전에 학습하고 계속 사용해온 개념인데도 불구하고, WIL 을 정리하며 더 명확하게 개념을 정리할 수 있었다. 개념에 대한 재숙지 과정이 때때로 필요하다.

 

2. 내일부터는 로그인, 회원가입, 게시글 업로드, 게시글 수정, 댓글, 좋아요, 알람 기능 설정 ... 많은 기능 구현 작업에 익숙해져야 한다. 머리 박고 코딩해보자.