[TIL] React Hooks -1편-

Kyeong_Bong·2022년 6월 30일
1

TIL

목록 보기
14/18

React Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하고

기존 함수형 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해준다.

React Hooks의 종류

  • useState
  • useEffect
  • useContext
  • useReducer
  • useMemo
  • useCallback
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

일단 찾아본건 10가지이다..

1. useState

가장 기본이 되는 Hook이다.
함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며 상태를 관리해야 할 때 사용한다.

import React, { useState } from 'react';

const Hook() {
  	
  	const [state, setState] = useState(0) 
  
	return (
    	<>
        	<p>{state}</p>
        	<button onClick={() => setState(state + 1)}</button>
        </>
    )
}

위와 같이 사용한다.

2. useEffect

랜더링을 할때마다 특정 작업이 실행되게 해준다.

import React, { useEffect } from 'react';

const Hook() {
  
 	 useEffect(() => {
 	 	console.log('hi!!');
	 }, []);
  
	return (

    )
}

위와 같이 처음 랜더링 될때 실행 할 수 있다.

useEffect의 의존성배열을 사용하면 특정 상태가 변화할때만 실행 되게 할수있는대

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

const Hook() {
  	
  	const [state, setState] = useState(0);
  
    useEffect(() => {
 	 	console.log('hi!!');
    }, [state]);
  
	return (
    	<>
        	<p>{state}</p>
        	<button onClick={() => setState(state + 1)}</button>
        </>
    )
}

위와 같이 사용한다.

3. useContext

context를 이용하면, 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에서 데이터를 사용할 수 있다.
크게 3가지 단계로 구분된다.
1. Context(저장소)를 생성
2. Context(저장소)에 값을 저장
3. Context에 저장된 값 불러오기

1. Context(저장소)를 생성


//context.js

import React, { createContext } from "react";
export const UserNameContext = createContext(null);

2. Context(저장소)에 값을 저장

  • Context(저장소)를 생성하면 내부에 Provider이라는 컴포넌트가 생성이 된다.
  • Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다.

// App.js

import React from "react";
import Screen from "./Screen";
import { UserNameContext } from "./context";

export default function App() {
  return (
    <UserNameContext.Provider value="John">
      <Screen />
    </UserNameContext.Provider>
  );
}
  • Context의 값은 Provider 컴포넌트를 통해 설정할 수 있다.
  • value에 설정하는 값이 실제로 하위 컴포넌트에 전달하려는 값이다.
  • Provider 컴포넌트로 감싸진 모든 컴포넌트는 Context에 대한 접근권한이 생긴다.

3. Context에 저장된 값 불러오기

// Screen.js

import React, { useContext } from "react";
import { UserNameContext } from "./context";

export default function Screen() {
  const userName = useContext(UserNameContext);
  return <p>My name is {userName}</p>;
}

위와 같이 useContext를 사용하여 값을 불러온다.


useReducer부터는 다음편에서..

profile
Junior Developer🔥

0개의 댓글