본문 바로가기
728x90

Front-End/React23

[React Hook] 5. 자신만의 Hook 만들기 (완) 출처 공식 문서 : 자신만의 Hook 만들기 – React (reactjs.org) 1. 자신만의 Hook을 통해 컴포넌트 로직을 함수로 뽑아낼 수 있습니다. 2. 예시 코드에 앞서 부연 설명 > 채팅 어플리케이션에서 친구가 온라인 상태인지 아닌지 표시하는 2개의 컴포넌트에서 공통 Hook들을 뽑아낸다. 하지만 여기서도 마찬가지로,조건문 혹은 반복문안에 들어가지 않고 최상위에 있어야 한다. 그리고 구분하기 쉽게 use로 시작하는 함수이름을 사용한다. 예시) (1) import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEf.. 2021. 2. 23.
[React Hook] 4. Hook 규칙 출처 공식 문서 : Hook의 규칙 – React (reactjs.org) 1. 최상위 에서만 Hook을 호출해야 한다. (1) 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. (2) Hook을 일반적인 자바스크립트 함수에서 호출하지말고 React 함수 내에서 호출해야 한다. (예외 - Custom Hook 이후 설명 예정) 2. ESLint 플러그인 > 위 두 규칙을 강제하는 플러그인이다. - Create React App에 기본적으로 포함되어 있다. 3. 설명 만약에 조건부로 effect를 실행하기를 원한다면, 조건문을 Hook 내부에 넣을 수 있다. 예시) function Form() { // 1. name이라는 state 변수를 사용하세요. const [name, setNam.. 2021. 2. 23.
[React Hook] 3. Effect Hook 출처 공식 문서 : Using the Effect Hook – React (reactjs.org) 1. Effect Hook > componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 > 렌더링으로 완성된 DOM을 조작하는 것. 2. 예시 과거) class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title .. 2021. 2. 23.
[React Hook] 2. State Hook 출처 공식 문서 : Using the State Hook – React (reactjs.org) 대표적인 Hook으로 useState 가 있다. 1. state 변수 선언하기 과거) class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } } Hook) import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); } >> 새로운 state 변수 count 를 선언. setCount는 count를 set해주는 함수 이름. > state를 함수 컴포넌트 안에서 사.. 2021. 2. 22.
728x90