임이지의 블로그

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

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

리액트를 다루는 기술 본문과 소스 전면 업그레이드! 기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자!본문과 소스 전면 업그레이드! 기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방 book.naver.com 책 소개 본문과 소스 전면 업그레이드! 기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자! 개정판이 나왔습니다. 리액트 16.8 버전에 훅이라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. 이에 맞춰 책에 사용된 주요 예시를 모두 함수형 컴포넌트 형태로 전환했습니다. 기존 내용을 보강 및 개선하고, 초판에 다루지 않았던 새로운 내용도 많이 수록했습니다. 리액트의 빅 팬이자 현업 프로그래머로서 리액트를 꾸준히 활용해 온 저자..

Developer/IT 도서 2021. 10. 18. 21:36

Do it! 클론 코딩 영화 평점 웹서비스(클론 코딩 시리즈 1) ‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다!9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클론 코딩이 book.naver.com 책 소개 ‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다! 9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클론 코딩이라고 말합니다. 클론 코딩은 페이스북, 인스타그램, 넷플릭스와 같은 실제 서비스를 복제하는 프로그래밍 학습 방법을 말합니다. 클론 코딩은 학습할 때마다 눈앞에 결과물이 바로바로 보이므로 프로그래밍을 빠르고 재미있게 배울 수 있습니다. 이 책은..

Developer/IT 도서 2021. 10. 18. 21:30