TIL 20 리액트 함수형 컴포넌트(useState)

1. 함수형 컴포넌트

1차 프로젝트때 클래스형 컴포넌트만 사용하다가 2차 프로젝트는 함수형 컴포넌트를 사용하기로 했다. 클래스형 컴포넌트에서 

해결하기 힘든 여러문제들을 커버하기 위해서 나온 컴포넌트이다.

1.1  함수형 컴포넌트 기본 작성

class Welcome extends Component {
  constructor() {
  super();
  this.state = {name:' jeon'}
  }
  
  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

export default Welcome;

위 코드는 기존에 사용했던 클래스형 컴포넌트이고

 

import React, { useState } from 'react';

function funcComponent() {
  return (
    <div>
      <p>hello world!!!!</p>
      <button>
        Click me
      </button>
    </div>
  );
}

or

const funcComponent = () => {
  return (
      <div>
        <p>hello world!!!!</p>
        <button>
          Click me
        </button>
      </div>
    );
}

export default funcComponent

이 코드가 함수형 컴포넌트 기본형이다. 기본 함수를 쓰나 화살표 함수를 써서 구현하나 똑같다.

클래스형이랑 큰 차이점은 함수형 컴포넌트에는 render()함수가 없고 constructor()도 사용하지 않는다.

 

1.2 State값 관리는 어떻게?(useState)

클래스형 컴포넌트에서는 constructor함수 내부에서 this.state={}에서 state값들을 전부 다 관리했는데 

함수형 컴포넌트에서는 useState함수를 사용해서 컴포넌트의 state의 값들을 관리해준다!

 

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>
  );
}

export default Example;

useState()을 사용하기 위해서는 가장 먼저 우리가 React를 import 해올때 { useState }도 같이 import를 해줘야 된다.

const [count, setCount] = useState(0)을 보면 이는 구조분해 할당을 이용해서 선언한것이다.

count라는 state값을 선언하고 뒤에 있는 setCount함수로 이 state값을 제어한다는 것이다. 클래스형 컴포넌트에서는

모든 state값을 하나의 this.setState()함수를 사용해서 state값들을 제어했지만 함수형 컴포넌트에서는 각각의 state값을

각각의 함수로 제어를 해준다. useState(0)에서 괄호안에 있는 값은 state값의 초기값을 넣어준거다. 

이 과정을 stateHook이라고 한다. 위 코드를 보면 button을 클릭할때마다 setCount()가 실행되고 count값을 1씩 

증가시켜주는 코드다!!