Hook

Hook 소개

• React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법(스토어 연결등)을 제공하지 않아 이러한 문제들을 해결하기위해 render props나 고차 컴포넌트 같은 패턴을 사용하였다. 그러나 이런 패턴들은 컴포넌트 재구성이 필수며 코드 추적이 어렵다. React 개발자 도구에서 React 애플리케이션을 본다면 provider, consumer, 고차 컴포넌트, render props, 다른 추상화에 대한 레이어로 둘러쌓인 wrapper hell을 볼 가능성이 높다. 이러한 state Logic을 공유하기 hook을 만들게 되었다.
  Hook을 사용하면 컴포넌트로부터 State관련 logic을 추상화 가능하며 독립적인 테스트와 재사용이 가능하다. `hook은 계층의 변화 없이 상태 관련 로직을 재사용 할 수 있도록 도와줌'

• 기존에는 생명주기 메서드를 기반으로 쪼개져있었으나 hook은 컴포넌트를 서로 비슷한 것을 하는 작은 함수의 묶음으로 나누는 방법 사용

• Hook은 함수 컴포넌트에서 React state와 lifecycle을 연동(hook into)할 수 있게 해주는 함수

• 클래스에서는 동작하지 않으며 클래스 없이 react 사용가능하게함

• 내장 hook을 제공하며 custom도 가능

• react 16.8버전부터 새로 추가된 개념

• 클래스형 컴포넌트를 사용하지 않더라도 state와 다른 react기능을 사용할 수 있게 해줌

Hook 종류

State Hook

• useStatestate를 관리하는 함수
• 현재의 state값과 이 값을 업데이트 하는 함수 제공, 배열 구조분해로 첫번째로 state값, 두번째로 업데이트하는 함수 할당
• 업데이트 시 차이점은 이전 state와 새로운 state를 합치지 않는 것
• useState는 인자로 초기 state 값을 받으며 첫번째 렌더링 시 한번 사용됨
• 컴포넌트가 re-rendering되어도 값 유지

useState사용

import { useState } from 'react';

export const ComponentDefault = () => {
    const [number, setNumber] = useState(0);

    return (
        <div>
            <h1>State 공부</h1>
            <h3>현재 number는 {number}입니다</h3>
            <button onClick={() => setNumber(number + 1)}>+1</button>
            <button onClick={() => setNumber(number - 1)}>-1</button>
        </div>
    );
};

state를 배열로 사용하는 경우

• 배열에 값을 추가해줄 때는 spread연산자을 이용해 값을 추가해주었다.
  

import { useState } from 'react';

export const ComponentDefault = () => {
    const [fruits, setFruits] = useState([]);
    const [input, setInput] = useState('');
  //키보드에서 입력받은 값을 state로 실시간으로 저장하여 사용하고자 state사용

    const addFruitsList = () => {
      //추가 버튼을 누르거나 Enter입력시 배열에 추가하도록 만든 함수
        setFruits([...fruits, input]);
      //spread연산자를 이용하여 기존값을 넣어주고 새로운 값을 넣어준다
        setInput('');
      //값을 넣어준 다음 input 비워주기
    };

    return (
        <div>
            <h1>State 공부</h1>
            <h3>
                {fruits.length > 0
                    ? `${fruits} 팝니다`
                    : '가락시장 다녀오겠습니다'}
              {/* 삼항연산자를 이용하여 값이 있을때만 보여주고 아닌 경우 값을 다르게 보여준다*/}
            </h3>
            <input
                type="text"
                value={input}
              {/*value를 state로 관리하면 변할 때마다 화면에 실시간으로 보여줄 수 있으며 */}
                onChange={(e) => {
//input값이 바뀔때마다 state에 적용
                    setInput(e.target.value);
                }}
                onKeyDown={(e) => {
            //엔터 눌렀을 때 값 추가
            //e.nativeEvent.isComposing은 한글이 두번씩 입력되는 것을 방지하기 위해 넣어놓은것
                    if (e.nativeEvent.isComposing) {
                        return;
                    }
                    if (e.key === 'Enter') {
                      //엔터를 눌렀으면 state에 추가해주기
                      //e.key === 'Enter'
                      //e.code === 'Enter'
                      //e.keyCode === 13
                      //다양하게 사용가능하므로 e객체를 찍어보길 권장
                        addFruitsList();
                    }
                }}
            />
            <button onClick={addFruitsList}>추가</button>
        </div>
    );
};

엔터시 한글이 두 번 입력되는 경우

• 한글은 자음과 모음의 조합으로 한 음절이 만들어지는 조합문자이기 때문에 글자가 조합중인건지 조합이 끝낸상태인지 파악하기가 어렵다. 이러한 점으로 한글 입력시 두번씩 입력되는 이슈가 발생한다. (영어는 조합문자가 아니기 때문에 해당 이슈가 없다)
• 이러한 버그를 막기 위한 방법은 다음과 같다.
• 조합중이면 return 시켜주면된다!
• 리액트 합성이벤트에는 isComposing이 없기 때문에 nativeEvent의 isComposing을 사용해 주면된다.

onKeyDown={(e) => {
	if (e.nativeEvent.isComposing) {
		return;
	}
}

State를 객체로 사용하는 경우

• 객체로 사용하는 경우 한가지 값만 변경해주고 싶을 때 다음과 같이 사용해주면된다.
• 이전의 객체를 받아와 모두 spread 연산자를 이용해 모두 넣어주고, 그 뒤에 key:value형태로 업데이트해주고싶은 값을 넣어주면 된다.
• 새로운 객체를 넣어주고 싶을 때에는 concat을 이용해 기존 객체에 추가한 객체를 넣어주면된다!

import { useState } from 'react';

export const ComponentDefault = () => {
    const [studentInfo, setStudentInfo] = useState({
        id: '2013',
        name: '양갱',
        status: '휴학중',
    });

    const graduate = () => {
        setStudentInfo((prevState) => {
            return { ...prevState, status: '졸업' };
        });
    };
    const { id, name, status } = studentInfo;

    return (
        <div>
            <h1>State 공부</h1>
            <h3>
                {`학번 : ${id} 이름 : ${name} 상태 : ${status}`}
            </h3>
            <button onClick={graduate}>졸업</button>
        </div>
    );
};

처음엔 사실 어려웠으나 개념을 정리하면 할수록 재미있어지는 state 이다.. 못한복습이제 열심히 해야지!