[SeSAC] React 학습 정리(3) / 이벤트-함수형 컴포넌트

1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서)

2. 함수형 컴포넌트에서 이벤트 핸들링

3. 함수형 컴포넌트에서 이벤트 핸들러에게 인자를 전달하기(쉬움)

 

 

1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서)

함수형 컴포넌트는 함수 자체이다. (클래스형 컴포넌트와는 태생이 다름)

 

예를 들어 함수 자체인 함수형 컴포넌트 내부의 함수1, 함수2, 함수3 이 있다면, 컴포넌트 내부의 함수1~3 의 정보를 찾고 사용하기 위한(상태를 관리하기위한) 방법은 무엇인가??

 

클래스나 객체의 경우에는 

클래스/객체 내부의 메서드(함수)1, 메서드(함수)2, 메서드(함수)3 -> 메서드(함수)1을 찾고 사용하기위해(상태를 관리하기 위해) this를 사용한다. >> 메서드(함수)1의 this가 클래스/객체 자체를 가리키면 this를 사용해서 메서드2, 메서드3등을 사용 할수 있다.

 

하지만 함수형 컴포넌트에서 this는 컴포넌트 자체를 가리키지 않는다.

그렇기 때문에 함수형 컴포넌트 내부의 함수에서 함수형 컴포넌트 내부의 변수나 다른 함수를 찾고 사용하기 위해(상태관리) 다른 방법이 필요하다. 그래서 함수형 컴포넌트에서는 상태관리를 위해 this말고 React Hook 을 사용한다. 

 

훅 종류들.. 그냥 이렇게 표현해봄

React Hook {

    useState, //  함수형 컴포넌트 내에서 상태를 선언하고 업데이트

    useReducer, // 상태를 보다 세밀하게 관리하고 여러 컴포넌트 간에 상태를 공유

    useContext, // 상태를 보다 세밀하게 관리하고 여러 컴포넌트 간에 상태를 공유

    useEffect,

    ...

}

 

 

2. 함수형 컴포넌트에서 이벤트 핸들링 (인자가 없는경우)

1.useState를 사용해 state값 초기화

2.동적으로 state값을 변경하는 함수를 만듬

3.이벤트 리스너에 함수를 전달

 

import { useState } from 'react';

const SayFunction = () => {

  // const [state, setState] = useState(initialState);
  const [message, setMessage] = useState('welcome');

  const onClickEnter = () => {
    setMessage('Hi!');
  };
  const onClickLeave = () => {
    setMessage('Bye!');
  };

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default SayFunction;

 

3. 함수형 컴포넌트에서 이벤트 핸들러에게 인자를 전달하기(쉬움)

 

합성 이벤트 전달 및 일반 이벤트 전달 방법

* 화살표 함수 사용하는게 가장 간결

import { useState } from 'react';

const FunctionComponent = () => {
  const [age, setAge] = useState(31)

  const consoleLogE = (e) => {
    console.log(e)
  }

  const oneMoreAge = (e, name) => {
    setAge(age + 1)
    console.log(`${name}님 한살 추가요 ${age}세 입니다.`)
    console.log(e)
  }
  
  return (
    <div>
      <h1>FunctionComponent</h1>
      <button onClick={function(e) { consoleLogE(e)}}>합성 이벤트 객체 보내기</button>
      <button onClick={(e) => { consoleLogE(e)}}>합성 이벤트 객체 보내기</button>

      {/* 인자를 전달하는 방법 */}
      <h3>{age} 살</h3>
      <button onClick={oneMoreAge.bind(null, '김태균')}>한살더 먹어</button>
      <button onClick={function() {oneMoreAge('김태균')}}>한살더 먹어</button>
      <button onClick={() => oneMoreAge('김태균')}>한살더 먹어</button>

      {/* 인자 + 합성이벤트객체 를 전달하는 방법 */}
      <button onClick={function(e) {oneMoreAge(e, '김태균')}}>한살더 먹어</button>
      <button onClick={(e) => oneMoreAge(e, '김태균')}>한살더 먹어</button>
    </div>
  );
};

export default FunctionComponent;

 

 

끝