Web/React.js16 Suspense를 사용하자 *react conf 2021 동영상을 참고했습니다. Suspense를 사용해야하는 이유 리액트는 데이터가 위에서 아래로 즉 단방향으로 흐르기때문에 서비스의 전반적인 흐름을 쉽게 이해 할 수 있습니다. 각 컴포넌트는 데이터를 가공하거나 사용하여 jsx를 반환합니다. 컴포넌트 내부에서도 코드의 흐름은 위에서 아래로 흐릅니다. 하지만 비동기적인 코드가 사용되면 그 흐름은 깨집니다. 코드를 건너 뛰어가며 보고 이해해야하기 때문입니다. // 비동기 코드가 들어간다면 function List({pageId})) { const [items, setItems] = useState(); // useEffect를 사용하여 fetch를 하게 되고 // fullfill 상태가 되면 state가 업데이트 되어 re-rende.. 2021. 12. 14. [STUDY] 커스텀 Hooks 자신만의 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); return () => { .. 2021. 3. 27. [STUDY] Hook의 규칙 Hook는 자바스크립트 함수이다. Hook를 사용할 때 두 가지 규칙을 준수해야 한다. 규칙들을 강제하기 위해 linter 플러그인을 제공하고 있다. 최상위(at the Top Level) 에서만 Hook를 호출해야 한다 반복문, 조건문, 중첩된 함수 내에서 Hook를 호출하면 안된다. 리액트 함수의 최상위 (at the top level) 에서 Hook를 호출해야 한다. 컴포넌트가 render 될 때마다 동일한 순서로 Hook가 호출되는 것을 보장한다. ( 여러번 호출되도 Hook의 상태를 올바르게 유지할 수 있게 해준다) ESLint 플러그인 eslint-plugin-react-hooks 라는 ESLint를 플러그인을 프로젝트에 추가할 수 있다. npm install eslint-plugin-reac.. 2021. 3. 23. [STUDY] Effect Hook 사용하기 useEffect 알아보기 Effect Hook를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다. * side effect 혹은 effect는 React 컴포넌트 안에서 데이터를 가져오거나 구독하고 DOM을 직접 조작하는 작업을 말한다. 리액트의 class 생명주기 메소드 중 comonentDidMount 와 componentDidUpdate, 그리고 comonentWillUnmount, 이 세개가 합쳐진 것이 useEffect다 라고 생각해도 좋다. 리액트 컴포넌트는 일반적으로 두 종류의 side effects 가 있다. clean-up 이 필요한것 그렇지 않은것 Clean-up을 이용하지 않는 Effects DOM을 업데이트 한 뒤 추가로 코드를 실행해야하는 경우 ( 네트워크 요청.. 2021. 3. 22. [STUDY] State Hook 사용하기 Hook 와 같은 기능을 하는 클래스 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 ); } } 위 React 클래스에서 state 는 { count: 0} 이며 사용자가 this.setState()를 호출 하는 버튼을 클릭했을때 state.count를 증가시킨다. function Example(props) { // Hooks 사용 return ; } // or c.. 2021. 3. 21. [STUDY] Hook 개요 React 내장 Hooks State Hook import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 위에서 useState 가 바로 Hook 입니다. Hook를 호출해 함수컴포넌트 안에 State를 추가했습니다. ( 다시 렌더링 되어도 그대로 유지 됨 ) 클래스 컴포넌트의 this.state 와 달리 setState Hook의 state는 객체일 필요가 없습니다. Effect Hook 데이터를 가져오거나 .. 2021. 3. 19. [STUDY] Hook 소개 Hook란? 함수 컴포넌트에서 상태와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수이다. Hook 소개 Hook 는 React 버전 16.8에 새로 추가되었다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 자주 사용하는 useState도 hook의 한 종류이다. Class 나 React 컨셉을 대체하지 않으나 props, state, context, refs, life cycle 과 같은 React 개념에 좀 더 직관적인 API 를 제공합니다. Hook를 탄생시킨 동기 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다 컴포넌트로 독립적인 테스트와 재사용이 가능하다. 클래스의 각 생명주기 메소드에서 관련 없는 로직이 섞여.. 2021. 3. 18. [STUDY] 성능 최적화 React를 사용하면 특별한 최적화 작업을 하지 않아도 빠른 사용자 인터페이스를 제공하지만 몇가지 속도를 높일 수 있는 방법이 있다. 프로덕션 빌드 활용 축소된 프로덕션 빌드 React의 수많은 유용한 경고 이용하여 개발하기 React의 경고는 React를 크고 느리게 하기 때문에 앱을 배포할 때 '프로덕션 버전' 을 사용해야 한다 React Developer Tools for Chrome ( extension ) 을 설치하여 빌드 프로세스가 올바르게 설정 되었는지 확인할 수 있다. 앱을 개발할때는 개발 모드 사용자에게 앱을 배포할 때는 프로덕션 모드 프로덕션 용도의 앱을 제작할 수 있는 방법 1. Create React App npm run build 명령어를 실행하면 프로젝트의 build/ 폴더에 애.. 2021. 3. 17. [STUDY] 고차 컴포넌트 고차함수 Higher-Order Components ( HOC ) 고차 함수는 컴포넌트 로직을 재사용 하기 위한 기술이다. React API ( X ) HOC의 이름은 with이름지정 규칙을 따른다. HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수 예) 리덕스 - connect() 함수 / 라우터 - withRouter() 재사용 // 답글 목록 컴포넌트 class CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" is some global data source co.. 2021. 3. 16. 이전 1 2 다음
