function Container() {
	// 비즈니스 로직을 수행하는 컨테이너 컴포넌트
	// do something like API Communication
	const [fetchedData, setFetchedData] = useState();
	useEffect(()=>{
		fetch(...).then(res=>setFetchedData(res));
	}, []);
	// 컨테이너 컴포넌트로부터 데이터 전달받아
	// 화면에 표현하는 프레젠테이션 컴포넌트
	return <Presentation data={fetchedData} />
}

function Presentation() {
	// 비즈니스 로직을 수행하는 훅을 호출
	const fetchedData = useApiHook();
	return <div> {fetchedData} <div/>
}

// a.js
function HOC(Component, url) {
	return (props) => {
		// do something like API Communication
		const [fetchedData, setFetchedData] = useState();
		useEffect(()=>{
			fetch(...).then(res=>setFetchedData(res));
		}, []);
		return <Component {...props} data={fetchedData}/>
	}
}

// b.js
function Display(props) {
	return HOC(props.component, props.url);
}

// 기존
function HOC(Component) {
	const clickHandler = (event) => { ... };
	return <Component onClick={clickHandler} />
}
	
// 훅으로 대체
function useHOC() {
	const ref = useRef(null);
	const clickHandler = (event) => { ... };
	useEffect(()=>{
		const node = ref.current;
		// ref 대상이 렌더링 된 경우 클릭 이벤트 핸들러 attach
		if(node) {
			node.addEventListener("click", clickHandler);
		}
		// 컴포넌트가 마운트 해제될 때 이벤트 리스너를 지우는 후처리
		return () => {
			node.removeEventListener("click", clickHandler);
		}
	}, []);
	return ref;
}
function Component(props) {
	const hocRef = useHOC();
	return <div ref={hocRef}> ... </div>
}

function HOC(Component) {
	return props => <Component style={ ... } {...props} />
}
// 이 경우, HOC가 전달하는 style 값으로 button에 전달하고 있던 style 값이 대체됨
const StyledComponent = HOC(() => <button style={ ... }>button</button> );

function withStyles(Component) {
  return props => {
    const style = { padding: '0.2rem', margin: '1rem' }
    return <Component style={style} {...props} />
  }
}

const Button = () = <button style={{ color: 'red' }}>Click me!</button>
const StyledButton = withStyles(Button)

const Title = (props) => props.render();

<Title render={() => <h1>I am a render prop!</h1>} />

function Component(props) {
  const data = { ... }

  return props.render(data);
}

<Component render={data => <ChildComponent data={data} />}

<Parent>
	<SiblingInput value={value} handleChange={handleChange} />
	<SiblingView value={value} />
</Parent>

function Input(props) {
	const [input, setInput] = useState();
	return (
		<>
			<input value={value} onChange={(e)=>setInput(e.target.value)} />
			// render로 전달될 JSX 함수에게 value를 인자로 전달
			{props.render(value)}
		</>
	);
}

function Parent() {
	// 인자로 전달받은 value 값을 하위 SiblingView 컴포넌트들에게 전달하는 render JSX 함수
	return <Input render={(value) => (
			<>
				<SiblingView value={value} />
				<SiblingView2 value={value} />
			</>
		)} 
	/>
}

function Parent() {
  return (
	  <Input>
		{(value) => (
		  <>
			<Kelvin value={value} />
			<Fahrenheit value={value} />
		  </>
		)}
	  </Input>
  );
}

function Input(props) {
	const [input, setInput] = useState();
	return (
		<>
			<input value={value} onChange={(e)=>setInput(e.target.value)} />
			// Input의 자식 컴포넌트로 전달될 JSX 함수에게 value를 인자로 전달
			{props.children(value)}
		</>
	);
}

function Parent() {
	const [input, setInput] = useState();
	return (
		<>
			<input value={input} onChange={(e) => setInput(e.target.value)} />
			<Kelvin value={value} />
			<Fahrenheit value={value} />
		</>
	);
}

class Component extends React.Component {
  constructor() {
    super()
	// 상태 선언
    this.state = { ... }
	// 클래스 컴포넌트에 사용자 정의 함수를 추가하는 경우
	// 해당 함수에 this를 바인딩해주어야 함.
	// 그러지 않으면 해당 함수 내부에서 호출하는 this는 undefined가 되거나
	// 해당 함수를 사용하는 HTML 요소 등이 this로 지정될 수 있다.
    this.customMethod = this.customMethodOne.bind(this)
  }

  /* 렌더링 생명주기 관련 메서드 */
  componentDidMount() { ...}
  componentWillUnmount() { ... }

  /* 사용자 정의 함수 */
  customMethod() { ... }

  render() { return { ... }}
}

	const [stateSnapshot, setState] = useState(initialValue);

// 컴포넌트가 마운트 되었을 때
componentDidMount() { ... }
useEffect(() => { ... }, [])

// 컴포넌트가 업데이트 되었을 때
componentDidUpdate() { ... }
useEffect(() => { ... })

// 컴포넌트가 마운트 해제 되었을 때
componentWillUnmount() { ... }
useEffect(() => { return () => { ... } }, [])

// 예시
// 인자로 넘어온 targetKey가 눌린 경우,
// 상태 값인 keyPressed를 true로 만들고, 키를 떼면 false로 만드는 훅이다.
function useKeyPress(targetKey) {
  const [keyPressed, setKeyPressed] = React.useState(false)

  function handleDown({ key }) {
    if (key === targetKey) {
      setKeyPressed(true)
    }
  }

  function handleUp({ key }) {
    if (key === targetKey) {
      setKeyPressed(false)
    }
  }

  React.useEffect(() => {
    window.addEventListener('keydown', handleDown)
    window.addEventListener('keyup', handleUp)

    return () => {
      window.removeEventListener('keydown', handleDown)
      window.removeEventListener('keyup', handleUp)
    }
  }, [])

  return keyPressed
}

// 리듀서 함수
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}
// 컴포넌트 내부에서 dispatch 호출
...
	const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
	// 디스패치 함수의 인자로 넘긴 객체는 리듀서 함수의 action으로 넘겨진다
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    });
...

// 예제 (출처: [Compound Pattern (patterns.dev)](https://www.patterns.dev/react/compound-pattern))
// 이미지에 마우스를 hover하면 나타나는 ... 버튼과
// 이를 클릭시 나타나는 Flyout 메뉴의 Edit, Delete 버튼을 보여주기 위한 메뉴

// Flyout.jsx
const FlyOutContext = createContext();

function FlyOut(props) {
  const [open, toggle] = useState(false);

  return (
    <FlyOutContext.Provider value={{ open, toggle }}>
      {props.children}
    </FlyOutContext.Provider>
  );
}

function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);

  return (
    <div onClick={() => toggle(!open)}>
      <Icon />
    </div>
  );
}

function List({ children }) {
  const { open } = useContext(FlyOutContext);
  return open && <ul>{children}</ul>;
}

function Item({ children }) {
  return <li>{children}</li>;
}

// 아래와 같이 선언할 경우, Toggle, List, Item은 FlyOut의 Static Property가 된다.
// 따라서, 이들을 사용하는 쪽에서는 FlyOut만 Import해도 이들을 사용할 수 있다.
FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

// FlyoutMenu.jsx
import React from "react";
import { FlyOut } from "./FlyOut";

// FlyoutMenu에는 아무런 상태를 추가하지 않고,
// FlyOut 메뉴를 구현할 수 있다.
export default function FlyoutMenu() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  );
}

export function FlyOut(props) {
  const [open, toggle] = React.useState(false);

  return (
    <div>
      {React.Children.map(props.children, (child) =>
        React.cloneElement(child, { open, toggle })
      )}
    </div>
  );
}

export default function FlyoutMenu() {
  return (
    <FlyOut>
      {/* 부모-자식 관계 끊어짐 */}
      <div>
        <FlyOut.Toggle />
        <FlyOut.List>
          <FlyOut.Item>Edit</FlyOut.Item>
          <FlyOut.Item>Delete</FlyOut.Item>
        </FlyOut.List>
      </div>
    </FlyOut>
  );
}