Skip to content

ReactJS Hook #

Find similar titles

1회 업데이트 됨.

Edit
  • 최초 작성자
    htBae
  • 최근 업데이트
    jmchoi

Structured data

Category
Programming

ReactJS Hook #

소개 #

React를 구성하는 중요 단위인 Component는 아래의 두 가지 형태로 표현할 수 있다.

1. Class component
2. Functional component

이 중 Class component는 Functional component에 비해 여러 단점을 가지고 있었지만 원활한 state의 관리와 life cycle method를 위해 Functional component와 혼합되어 사용되었다.

그러나 React 16.8버전부터 react hook이 등장하며 Functional component도 동일한 작업이 가능해지면서, React를 함수 중심으로 구현할 수 있게 되며 코드의 복잡성이 줄어들고 재사용성의 기댓값을 높일 수 있게 되었다.

종류 #

  1. useState

    state 변수 및 해당 state의 업데이트 함수를 선언하는 hook이다.

    const [name, setName] = useState<string>("Insilicogen");
    
    • 배열 형태의 데이터를 리턴하며 첫 번째 인덱스 값은 state 변수, 두 번째 인덱스값은 해당 state를 업데이트하는 함수다.
    • useState에 넘기는 파라미터 값은 초깃값을 의미한다.
    • Typescript와 함께 사용 시, useState hook 뒤에 타입을 작성한다.
  2. useEffect

    component의 요소가 모두 rendering 된 이후 마지막에 실행되는 hook으로 주로 side effect를 다룰 때 사용한다. 의존적인 대상을 지정하여 대상의 값이 변할 때마다 실행되도록 구성할 수 있다.

    useEffect(function, arr)
    
    • useEffect는 두 개의 인자가 필요하며 첫 번째 인자는 실행할 함수를, 두 번째 인사는 의존할 대상 목록의 배열 데이터이다.
    • 의존 대상이 있다면, 대상의 값이 변할 때마다 첫 번째 인자로 정의한 함수가 실행된다.
    • 의존 대상이 없다면, component가 rendering 되는 최초 1회에만 함수가 실행된다.
      • 대상이 없다고 하여도 빈 배열을 넘겨주어야 한다.

    아래는 useEffect hook을 사용한 예제이다.

    const [date, setDate] = useState<Date>(new Date());
    const [isSaved, setIsSaved] = useState<boolean>(false);
    
    useEffect(()=> {
        setDate(new Date());
    }, [isSaved]);
    
    const saveHandler =()=>{
        setIsSave(true);
    }
    
    return (<div>
        <button type='button' onClick={saveHandler}>Save</button>
    </div>)
    
    • component가 실행될 때, useState로 state 변수(date, isSave)가 초기화된다.
    • component가 모두 rendering 된 이후 useEffect가 실행되어야 하지만, isSaved에 의존적이기 때문에 실행되지 않는다.
    • 사용자가 button을 클릭하게 될 경우 saveHandler 함수가 실행되고 isSaved 값이 false로 변경된다.
    • state가 변경되었기 때문에 다시 component가 rendering 된다.
    • 마지막으로 useEffect가 실행되면서 isSaved의 변경이 확인되고, 내부의 정의한 함수를 실행하게 된다.
    • date 값이 갱신되어 state가 변함에 따라 다시 component가 rendering 된다.
  3. useContext

    React가 가지는 특징 중 하나로, 데이터의 흐름은 Parent component가 Child component에 단방향으로 흐른다. 그렇기 때문에 발생하는 문제 중 하나가 component의 구조가 복잡해지고 그 깊이가 깊어질수록, 불필요한 데이터의 전달이 발생하게 된다. 이러한 문제를 해결하기 위해 Parent component와 Child component들 간의 직접적인 전달 없이 데이터를 공유할 수 있는 context라는 개념이 생겼다.

    기본적으로 context를 생성 후 context의 Provider component를 원하는 component 구조의 가장 바깥에 씌워야 하며, 이후 Provider component 내부의 모든 component는 context의 값을 사용할 수 있게 된다.

    아래는 사용 예시이다.

    interface UserType{
        name : string,
        gender : 'male' | 'female'
    };
    
    const UserInfo : UserType{
        name : 'Bae',
        gender : 'male' 
    }
    
    // useState와 동일하게 타입과 초깃값을 함께 선언한다.
    const UserContext = createContext<UserType | undefined>(undefined);
    
    // 최상위 컴포넌트에 Provider component를 씌운다.
    const Parent =()=>{
        return (<>
            <UserContext.Provider value={UserInfo}>
                <OuterChild/>
            <UserContext.Provider/>
        </>)
    };
    
    const OuterChild =()=>{
        return (<>
            <InnerChild/>
        </>)
    };
    
    // depth가 깊은 component에서도 useContext를 통해 context 값을 공유받을 수 있다.
    const InnerChild =()=>{
        const context = useContext(UserContext);
        return ( 
            <div>
                <div>
                    <span>name</span/>
                    <span>{context.name}</span/>
                </div>
                <div>
                    <span>gender</span/>
                    <span>{context.gender}</span/>
                </div>
            </div>
    )};
    

Reference #

Suggested Pages #

0.0.1_20240214_1_v81