🐶🦶 BLOG

Hook은 다음 2가지 규칙을 따른다. 1. 최상위(at the top level)에서만 Hook 호출 반복문, 조건문, 중첩된 함수 내에서 실행X 조건부로 effect를 실행하길 원한다면 아래와 같이 조건문을 hook 내부에 넣을 수 있다. useEffect(function persistForm() { // 👍 더 이상 첫 번째 규칙을 어기지 않습니다 if (name !== '') { localStorage.setItem('formData', name); } }); 제공된 lint 규칙을 활용하면 이 문제는 해결됨! -> eslint-plugin-react-hooks 2. React 함수 컴포넌트 내에서만 Hook 호출 일반 JS에서 Hook 호출 X 직접 작성한 custom Hook 내에서는 훅 호출..

side effect ( = effect) 기능 데이터 가져오기 구독 설정하기 수동으로 리액트 컴포넌트의 DOM 수정하기 종류 정리(clean-up)가 필요한 것 그렇지 않은 것 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우 네트워크 리퀘스트 DOM 수동 조작 로깅 -> 실행 이후 신경 쓸 것이 없기 때문에! useEffect useEffect가 하는 일? -> useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말함 리액트는 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것 문서 타이틀 지정, 데이터 가져오기, 명령형 API 불러내기 등..

📌 State Hook 다음은 버튼을 클릭하면 값이 1씩 증가하는 간단한 카운터 예시 코드이다. import React, {useState} from 'react'; function MyComponent() { // "count"라는 새 상태 변수 선언 const[count, setCount] = useState(0); return ( You click {count} times setCount(count + 1)}> Click me ); } export default MyComponent; 여기서 사용한 useState가 훅(Hook)이다. hook을 호출해 함수 컴포넌트 안에 state 추가 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지 useState 특징 현재의 state값과 이 값을 ..