class LikjeButton extends React.Component {
	constructor(props){
		super(props)
		
		this.state = {   // state 를 정의함 (클래스 컴포넌트는 이방식, 함수 컴포넌트는 훅을 사용함)
			liked: false
		};
	}

	...
}

// state를 직접 수정(잘못된 방법)
this.state = {
	name: 'Inje'
};

// state를 setState함수를 사용한 수정(정상적인 사용법)
this.setState({
	name: 'Inje'
});

import React, { useState } from "react";

function Counter(props) {
	var count = 0;

	return (
		<div>
			<p>총 {count}번 클릭했습니다.</p>
			<button onClick={() => count++}>
				클릭
			</ button>
		</ div>
	);
}

//useState 사용방법
const [변수명, set함수명] = useState(초기값);

import React, { useState } from "react";

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

	return (
		<div>
			<p>총 {count}번 클릭했습니다.</p>
			<button onClick={() => setCount(count + 1)}>
				클릭
			</ button>
		</ div>
	);
}

useEffect(이펙트 함수, 의존성 배열);

improt React, { useState, useEffect } from react;

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

	// componentDidMount, componentDidUpdate 와 비슷하게 동작한다. 
	useEffect(() => {
		// 브라우저 API를 사용해서 document 의 타이틀 업데이틀 한다. 
		// 실행 자체가 컴포넌트 안에서 접근하기 때문에, 함수 컴포넌트 내부의 state, props에도 접근이 가능해진다. 
		document.title = `You clicked ${count} times`;
	});

	return (
		<div>
			<p>총 {count}번 클릭했습니다.</p>
			<button onClick={() => setCount(count + 1)}>
				클릭
			</ button>
		</ div>
	);
}

// componentDidUnmount와 동일한 기능을 사용하는 예시 
improt React, { useState, useEffect } from react;

function UserStatus(props) {
	const [isOnline, setIsOnline] = useState(null);

	function handleStatusChange(status) {
		setIsOnline(status.isOnline);
	}

	useEffect(() => {
		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		// 컴포넌트가 언마운트 될때 하는 행동을 동일하게 return 하면서 진행함 
		return () => {
		
			ServerAPI.unsubscribeUserStatus(props.user.id, handleSatatusChange);
		};
	});

	if (isOneline == null) {
		return '대기중...';	
	}
	return  isOnline ? '온라인'; '오프라인';
}

// useEffect 훅을 여러개 사용하는 예시 코드 
function UserStatusWithCounter(props) {
	const [count, setCount] = useStatus(0);

	useEffet(() => {
		document.title = `총 ${count}번 클릭했습니다.`;
	});

	const [isOnline, setIsOnline] = useState(null);
	useEffect(() => {
		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		// 컴포넌트가 언마운트 될때 하는 행동을 동일하게 return 하면서 진행함 
		return () => {
			ServerAPI.unsubscribeUserStatus(props.user.id, handleSatatusChange);
		};
	});

	function handleStatusChange(status) {
		setIsOnline(status.isOnline);
	}
	// . . .
}

useEffect (() => {
	// 컴포넌트가 마운트 된 이후,
	// 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
	// 의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트 시 단 한 번 씩만 실행됨
	// 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
	
	return () => {
		// 컴포넌트가 언마운트 되기 전에 실행됨
	}
}, [의존성 변수1, 변수2, 변수3, ... ]);

const memoizedValue = useMemo(
	() => {
		// 연산량이 높은 작업을 수행하여 결과를 반환
		return computeExpensiveValue(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2]
);

const memoizedValue = useMemo(
	() => {
	return computeExpensiveValue(a, b)
	}
);

const memoizedValue = useMemo(
	() => { 
		return computeExpensiveValue(a, b)
	}, []
);

const memoizedCallback = useCallback(
	() => {
		doSomething(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2]
);

useCallback(함수, 의존성 배열);
useMemo(() => 함수, 의존성 배열);

const refContainer = useRef(초깃값);
// 이렇게 reference 값으로 감싸지게 되면, 
// 해당 값은 라이프타임 전체에 걸쳐 유지되게 된다.
// 컴포넌트를 언마운트 전까진 계속 유지되도록 만드는 것이라고 볼 수 있다. 

function TextInputWithFocusButton(props) {
	const inputElem = useRef(null);

	const onButtonClick = () => {
		// `current` 는 마운트된 input element 를 카리킴
		inputElem.current.focus();
	};

	return (
		<>
			<input ref={inputElem} type="text" />
			<button onClick={onButtonClick }>
			Focus the input
			</button>
		</ >
	)
}

function MeasureExample(props) {
	const [height, setHeight] = useState(0);
	const measuredRef = useCallback(node => {
		if (node !== null) {
			setHeight(node.getBoundingClientRect().height)'
		}
	}, []);

	return (
		<>
			<h1 ref={measuredRef}>안녕, 리액트</h1>
			<h2>위 헤더의 높이는 {Math.rount(height)}px 입니다.</h2>
		</>
	);
}

function MyComponent(props) {
	const [name, setName] = useState('haryu');

	if (name !== '') {
		useEffect(() => {
			// 생략
		});
	}
	// 생략 
}

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

function UserStatus(props) {
	const [isOnline, setIsOnline] = useState(null);

	useEffect(() => {
		function handleStatusChange(status) {
			setIsOnline(status.isOnline);
		}

		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		return () => {
			ServierAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
		};
	});

	if (isOnline === null) {
		return '대기중...';
	}
	return isOnline ? '온라인' : '오프라인';
}

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

function UserListItem(props) {
	const [isOnline, setIsOnline] = useState(null);

	useEffect(() => {
		function handleStatusChange(status) {
			setIsOnline(status.isOnline);
		}

		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		return () => {
			ServierAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
		};
	});

	return (
		<li style={{ color: isOnline ? 'green' : 'black' }}>
			{props.user.name}
		</li>
	)
}

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

function useUserStatus(userId) {
	const [isOnline, setIsOnline] = useState(null);

	useEffect(() => {
		function handleStatusChange(status) {
			setIsOnline(status.isOnline);
		}

		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		return () => {
			ServierAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
		};
	});

	return isOnline
}

function UserStatus(props) {
	const isOnline = useUserStatus(props.user.id)

	if (isOnline === null) {
		return '대기중...';
	}
	return isOnline ? '온라인' : '오프라인';
}

function UserListItem(props) {
	const isOnline = useUserStatus(props.user.id)

	return (
		<li style={{ color: isOnline ? 'green' : 'black' }}>
			{props.user.name}
		</li>
	)
}

const userList = {
	{ id: 1, name: }
	{ id: 2, name: }
	{ id: 3, name: }
};

function ChatUserSelector(props) {
	const [userId, setUserId] = usestate(1);
	const isUserOnline = useUserStatus(userId);

	return (
		<>
			<Circle color={isUserOnline ? 'green' :'red'} />
			<selctr
				value={userId}
				onChange=(event => setuserId((Numbler(event.target.value))
			/>
				{userList.map(user => (
					<option key={user.id} value={user.id}>
						{user.name}
					</option>
				))}
			</selector>
	:;
}