React 라이브러리에서 제공하는 기본 내장 API 함수에 대해서 설명해주세요.

01. useState

const [state, setState] = useState(initialState);

상태 값과 그 상태 값을 갱신하는 함수를 반환합니다.

setState 함수는 state를 갱신할 때 사용합니다.

02. useEffect

useEffect(didUpdate)

명령형 또는 어떤 effect를 방생하는 함수를 인자로 받습니다.

useEffect에 전달된 함수는 화면이 렌더링이 완료된 후에 수행됩니다.

기본적으로 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있습니다.

componentDidMount 와 componentDidUpdate와는 다르게, useEffect로 전달된 함수는 지연 이벤트 동안에 렌더링이 완료된 후에 발생합니다.

조건부 effect 발생

effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생합니다. 이와 같은 방법으로 의존성 중 하나가 변경된다면 effect가 재발생합니다.

useEffect(()=>{}, [props.source])

두 번째로 전달된 props.source 가 변경될 때에만 useEffect가 발생합니다.

useEffect(()=>{}, [])

화면이 렌더링된 후 초기 1회만 실행됩니다.

03. useContext

const value = useContext(MyContext)

context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다.

context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정됩니다.

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

출처 : https://ko.reactjs.org/docs/hooks-reference.html#usestate