[ 노젓기 5주차 ] 응 계속 새로운거 알려줘봐 ㅋㅋㅋ

 

 

그만두면 그만이야

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

새로운거 그만 알려줏에ㅔ엥ㅇㅇ셩 ㅠㅠ

 

 

 

항해 99 5주차가 끝났다. 왜이렇게 React 과정은 시간이 빨리 가는 걸까?

 

정말 눈 깜짝 하는 사이에 시간이 바로 가버렸다

그리고 눈 깜짝 하니깐 머리에 들어 있던 것도 사라졌다

 

큰일이 나버렸다 어떡하지? ㅋㅋㅋㅋㅋ

지금 기준으로 React 심화반 수업 듣고 있는데 또 새로운게 나왔네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아직 지금까지 배운것들도 머리에 안 들어왔는데 

 

끝까지 한 번 머리에 꾸겨 넣어보자 어떻게든 되겠지

 

 

이번 주차 중요 키워드 🔥

 

라이프 사이클(class형 과 함수형), React hooks

 

컴포넌트에는 class형 컴포넌트와 함수형 컴포넌트가 있다

 

이 두 가지는 차이점이 있는데

 

[ 차이1: 선언방식 ]

 

클래스형 컴포넌트

 

<클래스형 컴포넌트>

1. class 키워드 필요

2. Component로 상속을 받아야한다.

3. render() 메소드가 반드시 필요하다.

4. state, lifeCycle 관련 기능사용이 가능하다.

5. 함수형보다 메모리 자원을 더 사용한다.

6. 임의 메소드를 정의할 수 있다.

 

 

 

함수형 컴포넌트

 

 

[차이2 : state]

 

클래스형 컴포넌트

 

<클래스형 컴포넌트>

1. constructor 안에서 this.state 초기 값 설정 가능

2. counstructor 없이도 바로 state 초기값을 설정 가능

3. this.setState() 를 통해 state값을 변경

4. 클래스형의 state는 객체형식

 

 

 

함수형 컴포넌트

 

<함수형 컴포넌트>

1. useState 함수로 state를 사용한다.

2. useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수이다.

 

 

 

 

[차이3 : props ]

Props 란?

- 컴포넌트의 속성을 설정

- 읽기 전용 (컴포넌트 자체 props를 수정하면 안된다.)

- 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

- 수정되는 값은 state 이다.

 

클래스형 컴포넌트

 

 

<클래스형 컴포넌트>

1. this.props로 통해 값을 불러올 수 있다.

 

 

 

함수형 컴포넌트

 

<함수형 컴포넌트>

1. props를 불러올 필요 없이 바로 호출 할 수 있다.

 

 

이 이외에도 이벤트 핸들링, 라이프 사이클이 차이점이 있다

 

하지만 React 에서는 "공식적으로" 함수형 컴포넌트를 사용하라고 해서 함수형을 좀더 공부를 많이 해야겠다

 

 

 

[ React hooks ]

 

 

React Hooks

React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다.

예를 들면 function component에서 state을 가질 수 있게 된 것

만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다.

모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것

 

React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다.

class component

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
  };

  countUpdate(n) {
    this.setState({
      count: n,
    });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>
          <h1>{count}</h1>
          <button
            onClick={() => {
              this.countUpdate(count + 1);
            }}
          >
            증가
          </button>
        </div>
      </div>
    );
  }
}

export default App;

hooks

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
};

export default App;

useState가 바로 Hook으로 Hook을 호출해 함수 컴포넌트(function component)안에 state를 추가했습니다.

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 이 함수를 핸들러나 다른 곳에서 호출할 수 있습니다.

useState는 클래스에서 사용하는 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 존재 합니다.

 

jsx 표현식을 사용하여 onClick이벤트 내부에 화살표 함수를 작성하여 바로 처리할 수도 있지만 아래와 같이 함수형으로 만들수도 있습니다.

import React, { useState } from "react";

export default function App() {
  const [item, setItem] = useState(0);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>number : {item}</h1>
      <button onClick={incrementItem}>증가</button>
      <button onClick={decrementItem}>감소</button>
    </div>
  );
}

 

useState의 인자로 무엇을 넘겨주어야 하나?

위의 예시에서 useState인자로 0을 전달한 이유는 카운터 증가를 시작할 때 0에서부터 시작하기 위해 state인 count의 초기 값을 0으로 설정한 것입니다. 만약 1부터 시작하고 싶으시다면 useState(1)로 인자 1을 전달하면 됩니다.

 

useState는 무엇을 반환?

state 변수, 해당 변수를 갱신할 함수 이 두 가지를 반환합니다. 가장 쉽게 클래스컴포넌트와 비교 해보도록 하겠습니다.

useState은 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다.

 

만일 아래와 같이 hook을 호출해 state를 추가하고 count를 0으로 초기화 했다면

const App = () => {
	const [count,setCount] = useState(0)
}

클래스 컴포넌트에서는 아래와 같음

class App extends Component {
  state = {
    count: null,
  };

  setCount() {
    this.setState({
      count: 0,
    });
  }