자주 쓰이는 React Hooks

useState

• 상태관리

const [counter, setCounter] = React.useState(0);

• useState를 실행시키면 return값으로 array( [counter, setCounter] )를 주는데,
  첫번째 item(=counter)이 상태, 두번째 item(setCounter)이 상태를 업데이트 해주는 함수임
• useState()안에 들어가는 것은 초기값을 의미

useEffect

• 두 개의 파라미터를 받는데, 첫번째로 함수를 받고 두번째로 array를 받음

useEffect(()=>{
	console.log('USE EFFECT RAN');
}, [counter])

• 두번째로 받은 array 값이 바뀌면, 첫번째로 받은 effect가 실행이 됨
• counter을 실행할때마다 console.log('USE EFFECT RAN')가 실행이 됨
• array 자리에 빈 배열을 넣게 되면 맨 처음 component가 mount가 됐을때만 실행이 됨
  즉, componentDidMount와 같은 효과를 냄

useEffect(()=>{
	// SOCKET IO OPEN
	console.log('USE EFFECT RAN');
    
    // Unmount
    return () => {
    	// SOKET IO CLOSE
    	console.log('UNMOUNT');
    };
}, [counter])

• 위와 같이 return값을 넣게 되면 componenet가 Unmount가 됐을 때 (컴포넌트가 사라졌을 때) 실행을 하게 됨

• SOKET IO 사용시 활용 가능

---

Socket.Io 란?

• 웹 소켓 연결을 통해 클라이언트와 서버간에 실시간 양방향 통신을 가능하게하는 JavaScript 라이브러리

• Socket : 클라이언트와 서버 간의 연결을 나타냄
  소켓을 사용하여 실시간으로 데이터를 보내고 받을 수 있음

• Sever : 클라이언트와의 소켓 연결을 설정하고 관리함
  클라이언트로 이벤트를 방출하거나 클라이언트로부터 이벤트를 수신 할 수 있음

• Client: 서버와의 소켓 연결을 설정하고 관리함
  서버와 동일하게, 서버로 이벤트를 방출하거나 서버에서 이벤트를 수신 할 수 있음

---

CustomHooks 만들기

• 재사용 가능한 로직을 함수로 추출한 것

• 이를 통해 컴포넌트 간에 상태 로직을 공유할 수 있음

• 이름은 항상 "use"로 시작해야 함
  ex) useCustomHook

• 함수는 JavaScript 함수를 생성하고, 함수 내에서 React의 내장 Hook들을 사용할 수 있음

• 함수 내에서 원하는 로직을 구현함(상태관리, 부수 효과 처리 등 포함 가능)

• 함수에서 필요한 값들을 반환함(상태 값, 상태 변경 함수 등)

• 만든 Hook은 컴포넌트에서 호출해서 사용하면 됨