useState

const[state, setState] = useState(초기값);

useState의 생성과 함께 초기화할 값을 넣어줌으로써 state에 값이 세팅된다.
현재 상태 값은 state에 들어있고, setState에 값을 세팅하여 값을 바꿀 수 있다!

const[time, setTiem] = useState(5);

예를 들어, time이라는 시간이 5라고 맞춰져있고 이 시간을 바꾸고 싶으면 setTime(6); 으로 입력하면 time은 5에서 6으로 바뀌는 것이다.

---

useEffect

useEffect는 화면에 첫 렌더링/ 다시 렌더링/ 화면에서 사라질때 주로 사용한다.

useEffect( {}=>{} )로 기본적으로 call-back 함수를 받는다.

1. useEffect( ()=> {
	// 작업..
});

렌더링 될떄 마다 실행 / 화면에 첫 렌더링될 떄

2. useEffect( ()=> {  
	// 작업..
}, [value] );

2. useEffect( ()=> { 
	// 작업..
}, [] );

value값이 바뀔떄 마다 실행 / 화면에 첫 렌더링될 떄
만약 [] 빈배열로 넣어주면 화면에 첫 렌더링될 떄만 작업이 실행된다.

---

useRef

const ref = useRef(value)     //{current: value}

반환된 ref는 어떠한 값을 저장하는 저장공간으로 사용된다.

Ref의 변화가되도 No 렌더링하여 변수들이 값이 유지됨
-> 불필요한 렌더링을 막을 수 있고 변경시 State의 변경 시 렌더링 하지 말아야할 값을 다룰 때 편리하다!

- DOM 요소에 접근하여 focus할 때도 사용!
const Ref = useRef(0);
console.log(Ref0) 하면 {current: 0}이 들어있음
useRef안에 있는 값에 접근하고 싶으면 Ref.current로 접근!

---

useContext

const { 사용할 value속성} = useContext( Context 컴포넌트)

- 트리구조의 컴포넌트를 거치지 않고 바로 전달할 떄 유용

1. Context 컴포넌트를 만들고 createContext를 import 하고 
createContext에 null로 초기화한다 상위 컴포넌트에서 provider로 
감싼 후 value 속성으로 넘겨줄 값을 넣고 넘겨줄 대상을 감싼다. 

2. 그리고 사용할 컴포넌트에서  
const { 사용할 value속성} = useContext( Context 컴포넌트) 
로 작성하면 된다.