임이지의 블로그

custom Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다. 아래는 채팅 어플리케이션에서 친구가 온라인 상태인지 아닌지에 대한 메시지를 표시하는 컴포넌트 입니다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); retu..

Web/REACT 2021. 11. 3. 12:40

Hook은 JavaScript 함수입니다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 합니다. 최상위(at the Top Level)에서만 Hook을 호출해야 합니다 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다. 오직 React 함수 내에서 Hook을 호출해야 합니다 Hook을 일반적인..

Web/REACT 2021. 11. 3. 12:32

Using the Effect Hook 클래스 기반 컴포넌트에서 상태를 관리하기 위해에서는 state를 사용해야 했습니다. 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트 16.8 버전에서 Hooks라는 기능이 도입이 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(()..

Web/REACT 2021. 11. 3. 12:06

Using the State Hook state hook 사용하는 방법을 알아 봅시다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스형 컴포넌트를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( You clicked {this.state.count} times this.setState({ count: this.state.count + 1 })}> Click me ); } } 위 코드에서는 state는 { count : 0 }이며 사용자가 this.setState() 를 호출..

Web/REACT 2021. 11. 3. 11:32

HOOK은 React 버전 16.8부터 React 요소로 새로 추가 되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 리액트에서 HOOK을 사용하는 이유는 functional component 에서 state를 가질 수 있게 합니다. 기존의 react 에서는 class component, did mount, render 이런것을 안해도 된다. 모든 것은 하나의 function 이 된다. 함수형 프로그래밍으로 모든 것을 할 수..

Web/REACT 2021. 10. 31. 19:49

useConfirm 은 훅은 사용하지 않는다. import React, { useState, useClick, useEffect, StrictMode } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useConfirm = (message = "", onConfirm, onCancel) => { if (onConfirm && typeof onConfirm !== "function") { return; } if (onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (confirm(message)) { onCon..

Web/REACT 2021. 10. 25. 14:38

useClick useRef() -> document.getElementByID() 사용한 것과 동등하다. 아래의 코드에서 h1 tag는 title이라는 ref를 갖고 있고 useClick을 훅으로 갖고 있다. 따라서 h1을 클릭하는 경우 useClick 내부의 동작을 하게 된다. useEffect로 인하여 클릭할 때 event 리스너를 동작해주고 함수 객체를 반환할 때 이벤트 리스너를 제거한다. didMount, didUpdate 에 동작에서 addEventListener 가 동작하고 WillUnmount에서 제거한다. import React, { useState, useEffect, useRef, StrictMode } from "react"; import ReactDOM from "react-dom..

Web/REACT 2021. 10. 25. 14:22

CORS Proxy 설정 npm 명령어로 http-proxy-middleware 를 설치한다. npm install http-proxy-middleware // npm 사용 일 경우 yarn add http-proxy-middleware // yarn 사용 일 경우 setupProxy.js 파일을 src 밑에 생성 후 아래와 같이 프로젝트 proxy 설정을 커스터마이징 해준다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', // 비지니스 서버..

Web/REACT 2021. 10. 19. 12:22