본문 바로가기
카테고리 없음

[WIL] 이노베이션 캠프 4주차 회고록(라이프사이클, react-hook)

도리닥닥 2022. 8. 29. 00:55
728x90

LifeCycle?

  • 컴포넌트가 웹 페이지에 나타났다가 사라지는 과정을 나타냄.

가상DOM

  • 메모리 상에서 돌아가는 가짜 DOM.
  • 기존 DOM과 어떤 행동 후 새로 그린 가상 DOM을 비교해서 바뀐 부분만 갈아 끼워줌. -> 돔 업데이트 처리가 간결함.

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

LifeCycle Method

import React from "react";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {
  // 생성자 함수
  constructor(props) {
    super(props);

    this.state = {
      cat_name: "나비",
    };

    console.log("in constructor!");
  }

  changeCatName = () => {
    // state를 업데이트하는 방법
    this.setState({cat_name: "바둑이"});

    console.log("고양이 이름을 바꾼다!");
  };

  componentDidMount() {
    // 첫번째 렌더에만 호출됨. API를 가져오거나 등등..
    console.log("in componentDidMount!");
  }

  componentDidUpdate(prevProps, prevState) {
    // 리렌더링이 끝난 다음에 호출됨.
    console.log(prevProps, prevState);
    console.log("in componentDidUpdate!");
  }

  componentWillUnmount() {
    console.log("in componentWillUnmount!");
  }

  render() {
    console.log("in render!");

    return (
      <div>
        {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있다. */}
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleEx;

 

React Hook ?

  • React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리
  • React 16.8 버전(2019년도)에 추가된 공식 라이브러리
  • 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 component로 새로운 React 프로젝트를 만들기를 권장.

Hook 규칙

  1. 최상위에서만 Hook을 호출.
  2. React 함수에서만 Hook을 호출
  3. Hook을 만들 때 앞에 use를 붙인다.
  4. React는 Hook에 노출되는 순서에 의존한다.

useState

  • useState는 컴포넌트에서 state값을 추가할 때 사용된다.
  1. import
import {useState} from "react";
  1. useState 선언
const [count, setCount] = useState(0)
  • useState() 호출 시 배열을 반환하는데, 첫 번째 원소는 상태값, 두 번째 원소는 상태를 업데이트 해주는 함수임.
  • 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌고 컴포넌트는 리렌더링 된다.
  • 호출 부분() 에 초기 설정 값을 넣을 수 있다.

useEffect

  • 화면 렌더링이 될 때마다 state 값을 내가 필요한 데이터 모양새로 바꿔 업데이트 할 때 사용된다.

1.import

import {useEffect} from "react";
  1. useEffect 선언
useEffect(() => {
    document.title = '업데이트 횟수: ${count}';
}, []);
  • 매개변수로 익명함수와 빈 배열 두가지가 들어간다.
  • 두 번째 매개변수인 배열(dependency array)에 빈 배열을 넣으면 화면에 처음 렌더링 될 때 한번 만 실행된다. 값을 넣게 되면, 그 값의 상태가 업데이트 될 때만 실행이된다.
  • 생략한다면 리랜더링할때마다 반복실행된다.
  • 콜백함수 안에 return값이 들어간다면(클린 업), 컴포넌트가 사라질 때에 마지막으로 정리한다. (구독을 취소한다던지..)

useRef

  • 자바스크립트에서는 특정 DOM(태그)를 선택할 때 Dom selector 함수((getElementById ...)를 사용하지만 리액트에서는 useRef를 사용한다.
  1. import
import {useRef} from "react"
  1. useRef 선언
const nameRef = useRef(null);

nameRef.current.focus();
  • 초기값으로 null을 넣어주었음.
  • 원하는 위치의 component에 ref={} 를 집어 넣어준다.
  • 포커스를 잡을 때 nameRef.current.focus() 형태로 작성한다.

4주차를 마치며

 리액트를 본격적으로 다루는 과제들이 주어졌다. Redux toolkit을 사용해서 전역으로 변수를 관리해주니, 기본 Redux를 사용할 때보다 훨씬 편리했다. 기술매니저님들이나 다른 인터넷 강의를 들었을 때 항상 들은 말은, 기본 Redux를 사용해보고 toolkit을 사용해야 응용을 하는데에 무리가 없다고 항상 말씀하셨는데, 기본적인 개념들을 잡고 toolkit을 사용하니 조금 더 수월했던 것 같다. 

 앞으로는 서버와 연결하여 기능들을 구현하는 것에 조금은 더 집중을 해야할 것 같다. 데이터베이스가 없이 기본적인 CRUD기능을 구현하는 것은 익숙하기 때문에, 조금 더 응용을 할 수 있도록 더 많은 공부를 해야겠다.

티스토리툴바