React 08

조영래·2023년 2월 5일

Ref

ref 전달은 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법.
애플리케이션 대부분의 컴포넌트에 필요하지는 않다. But 특히 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용할 수 있다.
forwardRef : input 컴포넌트에서 설정되는 ref다

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 이제 DOM 버튼으로 ref를 작접 받을 수 있다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

useState

const [state, setState] = useState(initialState);
상태 유지 값과 그 값을 갱신하는 함수를 반환한다.
최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같다.
setState 함수는 state를 갱신할 때 사용한다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다.

useContex

const [state, setState] = useState(initialState);
context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정된다.

useEffect()

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다, 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는디

<형태>
useEffect(function, deps)
useEffect(()=>{
    console.log("난될놈이야")
},[])
deps : 배열 형태. function을 실행시킬 조건.
deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행한다.

<useEffect 함수 불러올때>
import React, { useEffect } from "react";

리액트 context

리액트 context는 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해준다, => 전역적으로 데이터를 공유, 컴포넌트들이 데이터(state)를 더 쉽게 공유 할 수 있다.
const MyStore = React.createContext(defaultValue);