import React, { useState } from 'react';

// ES6버전에서 사용하는 화살표 함수를 사용했습니다.
const Example = () => {
	// 새로운 state 변수를 선언하고, count라 부르겠습니다.
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
};

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

function Example() {
  const [count, setCount] = useState(0);

  // useEffect는 첫번째 인자로 callBack함수를 받습니다.
  useEffect(() => {
    // 컴포넌트가 마운트 되고 setTimeout함수를실행합니다.
    setTimeout(() => {
        document.title = `You clicked ${count} times`;
    }, 3000);
  }, []); <--- 두번째 인자로 빈 배열 넣어주기

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

function Example() {
	const [count, setCount] = useState(0);

	// useEffect는 첫번째 인자로 callBack함수를 받습니다.
	useEffect(() => {
		// 컴포넌트가 업데이트 되고 setTimeout함수를 실행합니다.
		setTimeout(() => {
			document.title = `You clicked ${count} times`;
		}, 3000);
	}, [count]); //<------

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
}

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

// Scroll을 움직이면 h1의 스타일을 변화해주기 위한 함수.
const useScroll = () => {
	// state를 생성합니다.
	const [state, setState] = useState({
		x: 0,
		y: 0
	});
	// scrll의 값을 가져와 state를 갱신합니다.
	const onScroll = () => {
		setState({ y: window.scrollY, x: window.scrollX });
	};
	useEffect(() => {
		// scroll 이벤트를 만들어줍니다. 스크롤을 움직일때 마다
		// onScroll 함수가 실행됩니다.
		window.addEventListener('scroll', onScroll);
		return () => window.removeEventListener('scroll', onScroll); // <----
	}, []);
	return state;
};

const App = () => {
	const { y } = useScroll();
	return (
		<div style= className='App'>
			<h1 style=>Hi</h1>
		</div>
	);
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

function reducer(state, action) {
  return { ... }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환
}

import React, { useReducer } from 'react';

function reducer(state, action) {
	// action.type 에 따라 다른 작업 수행
	switch (action.type) {
		case 'INCREMENT':
			return { value: state.value + 1 };
		case 'DECREMENT':
			return { value: state.value - 1 };
		default:
			// 아무것도 해당되지 않을 때 기존 상태 반환
			return state;
	}
}

const CounterUseReducer = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });

	return (
		<div>
			<p>
				현재 카운터 값은 <b>{state.value}</b> 입니다.
			</p>
			<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
			<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
		</div>
	);
};

export default CounterUseReducer;

import React, { useReducer } from 'react';

function reducer(state, action) {
	return {
		...state,
		[action.name]: action.value
	};
}

const Info = () => {
	const [state, dispatch] = useReducer(reducer, {
		name: '',
		nickname: ''
	});
	const { name, nickname } = state;
	const onChange = e => {
		dispatch(e.target);
	};

	return (
		<div>
			<div>
				<input name='name' value={name} onChange={onChange} />
				<input name='nickname' value={nickname} onChange={onChange} />
			</div>
			<div>
				<div>
					<b>이름:</b> {name}
				</div>
				<div>
					<b>닉네임: </b>
					{nickname}
				</div>
			</div>
		</div>
	);
};

export default Info;

useCallback(() => {
	console.log('hello world!');
}, []);

useMemo(() => {
	const fn = () => {
		console.log('hello world!');
	};
	return fn;
}, []);

import React, { Component } from 'react';

class MyComponent extends Component {
	id = 1;
	setId = n => {
		this.id = n;
	};
	printId = () => {
		console.log(this.id);
	};
	render() {
		return <div>MyComponent</div>;
	}
}

export default MyComponent;

import React, { useRef } from 'react';

const RefSample = () => {
	const id = useRef(1);
	const setId = n => {
		id.current = n;
	};
	const printId = () => {
		console.log(id.current);
	};
	return <div>refsample</div>;
};

export default RefSample;

useEffect(async () => {});

// Before
import { useState } from 'react';

function Example() {
  const [name, setName] = useState("이름");

  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

export default function Example() {
  const name = useFormInput("name");
  const email = useFormInput("email");

  return <>
    <input {...name} />
    <input {...email} />
  </>
}

export default function useFormInput(defaultValue: string) {
  const [value, setValue] = useState(defaultValue);
  function changeValue(e) {
    setValue(e.target.value);
  }
  return {
    value,
    onChange : changeValue
  }
}

export function Example() {
  const profile = useFetch(API.fetchProfile);
  const friends = useFetch(API.fetchFriends);
  
  return <>
    { profile.isLoading ? "Loading..."  : profile.data }
    { friends.isLoading ? "Loading..."  : friends.data }
    </>
}

export function useFetch(func, conditions = []) {
  const [data, setData] = useState(null);

  const fetch = () => {
    func()
      .then(response => {
        setData(response);
      })
  };

  useEffect(fetch, conditions);

  const isLoading = (data == null);
  return { data, isLoading };
}