Bin's Blog

💻 개인 과제 👉 무비 앱에 실시간 채팅기능 구현 / 커스텀 훅 만들기 GitHub - hobin49/react-assignment-07-02- Contribute to hobin49/react-assignment-07-02- development by creating an account on GitHub. github.com 👉 과제 후기 및 느낀점 생각보다 커스텀 훅을 만든다는게 쉽지 않았다. 앞으로 자주 활용해서 적용해보는 연습들을 해보는 것이 중요하다.

1️⃣ useReducer 👉 React 내장 훅 중에 하나로, 간단한 컴포넌트 상태를 관리할 때는 useState()를 사용하는 반면에 보다 복잡한 컴포넌트 상태를 관리하는데 useReducer()가 사용된다. 👉 reduce함수에 분리시킴으로써 복잡한 상태 로직을 캡슐화하는데 도움이 된다. 👉 기본 형태 const [state, dispatch] = useReducer(reducer, initial); reducer: (state, action) => newState 형태의 함수다. 이 함수는 현재 상태와 분배된 액션을 받아 새 상태를 반환한다. initial: Reducer에 전달한 초기 상태 값이다. useReducer훅은 상태 값(state)과 해당 상태를 변경하기 위한 디스패치 함수("disp..

🤔 홉바이홉 통신이란? 👉 IP 주소를 통해 통신하는 과정을 홉바이홉(hop by hop) 통신이라고 한다. 👉 홉은 쉽게 말해 통신망에서 각 패킷이 여러 개의 라우터를 건너가는 모습을 비유적으로 표현한 것이다. 👉 예시를 들면, 서울에서 부산에 편지를 보낸다고 가정하자, 우체통에 편지를 넣으면 직원이 그 편지를 우체통에서 가져와 가장 가까운 우체국으로 먼저 간다. 이것이 첫 번째 홉이다. 그 다음에 큰 도시나 허브로 이동하게 된다. 이것이 두 번째 홉이다. 그 후 편지는 다른 도시나 지역의 허브로 이동하고, 마지막으로 친구의 집이 있는 부산의 우체국으로 전달된다. 이것이 세 번째 홉이다. 그리고 친구의 집으로 직접 배달하게 되는게 마지막 홉이다. 👉 수많은 서브네트워크 안에 있는 라우터의 라우팅 테이블..

📚 커스텀 훅(Hook) 👉 커스텀 훅(Custom Hooks)은 사용자가 직접 만든 훅을 말하며, 여러 컴포넌트 간에 상태 로직을 재사용하는 데 사용된다. 👉 커스텀 훅은 기본 훅을 활용하여 만들어지며, 이름은 "use"로 시작해야 한다. 📖 사용예시 👉 커스텀 훅 import {useState} from "react" function useCounter(initialCount) { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1) } return {count, increment}; } export default useCounter 👉 컴포넌트 import useCounter fro..

💻 개인 과제 👉 React를 이용하여 할 일 목록 만들기(소스코드) GitHub - hobin49/react-assignment Contribute to hobin49/react-assignment development by creating an account on GitHub. github.com 👉 결과물 💻 팀 과제 👉 Movie web 만들기 (소스코드) GitHub - UdemyFrontendBootCamp/2023-06-26-React-Movie-App: 2023-06-26 리액트 무비앱 만들기 실습입니다. 2023-06-26 리액트 무비앱 만들기 실습입니다. Contribute to UdemyFrontendBootCamp/2023-06-26-React-Movie-App development..