const TextInput = () => {
  const textInput = useRef(null);

  const focusInput = () => {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput}
      />
      <button onClick={focusInput}>
        Focus
      </button>
    </div>
  );
}

export default TextInput;

const Modal = () => {
  return ReactDOM.createPortal(
    <div>I am a modal</div>,
    document.body.querySelector('#app')
  )
}

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div onClick={() => setCount(count + 1)}>
      <div>Hello!</div>
      <div>count: {count}</div>
      <Modal />
    </div>
  )
}

export default App

function App() {
  return <Toolbar theme="green" />;
}

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

const ThemedButton = ({ theme }) => (
  <button className={`button-${theme}`}>
    button
  </button>
)

export default App;

const ThemeContext = createContext('green');

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

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

const ThemedButton = () => {
  const theme = useContext(ThemeContext) //import themeprovider의 value값 받아옴
  return (
    <button className={`button-${theme}`}>
      button
    </button>
  )
}

export default App;

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>