항해 99 3주차 회고 - (3)

1. WIL

1주일이 이렇게 빨리간다고...? 말도안돼....ㅠㅠ 우선 3주차 후기부터~!!! 3주차가 시작되면서 또 다른 새로운 팀원분들과 같이 하게되었다. 간단하게 인사를 나눈뒤 아무래도 심화과정을 듣는거다 보니 빠르게 인사를 하고 팀원분들과 각자 강의듣기를 시작하였다. 심화는 확실히 달랐고, 컴포넌트를 조각조각 쪼개다보니 이해하는 것에 어려움이 있었다. 그래서 생각한게 코드리뷰였다. 우선 1주안에 심화과제를 끝내야하기 때문에 강의를 최대한 빨리 듣고 1주차가 끝나면 코드리뷰하는 식으로 전체적인 흐름에 대해서 이해하려고 노력했던 것 같다. 물론 아직하는 중이지만...ㅎㅎ 코드리뷰 또한 조원들이 있었기때문에 같이 진행할 수 있었던 것 같다.

나는 항해99를 들어오기 전에도 부트캠프에 대해 관심이 많았었다. 아직 시작한지 별로 안돼서 그런지 항해99의 대한 정보가 많이 없었고, 결국 2기를 진행하고 계셨던 분에게 여쭤보았었다. 아니 근데 이게뭐람...지금보니까 김예지매니저님이였자나!!!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ개인 상담해주실 때도 이름이 뭔가 익숙해서 여쭤봤는데 매니저님이였고 너무 반가워서 개인상담할 때 편하게 상담을 진행할 수 있었다. 갑작스럽게 김예지매니점님을 언급하는 이유는 매니저님이 그 당시에 해주셨던 말이 생각나서였다. 매니저님께서 나에게 해주셨던 말은 "하는 만큼 가져가는 것 같다"는 말씀을 해주셨는데 지금 항해99를 하고있는 나로서 크게 공감이되었고 그 말이 지금의 나를 조금씩 더 발전시키는고 있는 것 같다. 비록 항해가 끝내려면 산맥을 넘고 또 넘어야하지만 나는 할 수있다고 긍정적으로 생각하고 있다. 항해99를 하면서 다양한 사람들과 교류를 하고 팀원들, 그리고 항해99 3기분들 매일 새벽 늦게까지 공부를 하시는 분들이 있기 때문에 지금까지 할 수 있었던 것같다(갑자기 쓰다보니 감성 폭발이네...정이 조오오오금 많아섴ㅋㅋㅋㅋㅋ)!!!

앞으로의 계획

첫째, 전체적인 흐름을 파악하고,
둘째, 코드에 대해 이해를 하고,
셋째, 최선을 다하는 것!

2. 라이프사이클이란(클래스형 vs 함수형)?

컴포넌트의 라이프 사이클은 정말 중요한 개념이다. 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. 라이프사이클은 크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업게이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트한다. 그림으로 이해를 해보자!

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

클래스형 컴포넌트

사용하는 법

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '이승민';
    return <h1>Hello, {name}</h1>
  }
}

클래스형 컴포넌트에서는 render()함수를 이용하여, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성되어야 한다.

함수형 컴포넌트

사용하는 법

mport React from 'react';

const App = () => {
  const name = '이승민';
  return <h1>Hello, {name}</h1>
}

클래스형 컴포넌트보다 간결하게 사용하며 리액트사이트를 보면 클래스형 컴포넌트를 사용하는 것보다 함수형 컴포넌트와 훅을 함께 사용하는 권장한다.

3. React hooks이란?

리액트 훅이란?

Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다.

훅이 등장하기 전 문제점

첫째, 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.

둘째,생명주기 컴포넌트로 인한 복잡한 컴포넌트는 이해하기 어려웠다. 상태관련 로직이 모두 같은 공간에 있기 때문이었다. Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.

useState란?

useState는 state hook이다. useState는 state와 setState()로 나뉘며 초기에 initialValue를 받고, 해당 초기값은 처음 렌더링시에만 사용한다. Hook은 간단히 말하면 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook을 통해 class 없이 리액트를 사용할 수 있다.
기존 클래스를 통해 구현한 예시

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    )
  }
}

위에 것을 훅을 통해 표현

import React, { useState } from 'react'
function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

useEffect란?

useEffect는 effect hook으로, React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다. 리액트는 기본적으로 렌더링 이후에 effect를 실행한다. 그리고 effect 함수는 컴포넌트 내에 있기 떄문에 props와 state에 접근할 수 있다. 첫번쨰 렌더링과 이후 업데이트 시 마다 effect가 수행된다.

// 이렇게하면 계속해서 관찰한다.
useEffect(() => {
  console.log('렌더링')
})
// 두번째 인자에 빈 배열을 추가하면 한번 실행 후 더이상 관찰하지 않는다. 로딩 타이밍에 처음에 한번만 실행된다.
useEffect(() => {
  console.log('렌더링')
}, [])