🐶🦶 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 불러내기 등..

Hook과 함수 컴포넌트 함수 컴포넌트 - 둘 다 가능 const Example = (props) => { // 여기서 Hook을 사용할 수 있습니다! return ; } function Example(props) { // 여기서 Hook을 사용할 수 있습니다! return ; } state가 없는 컴포넌트 hook은 state를 함수 안에서 사용가능하게 해줌 hook은 클래스 안에서 동작 X 하지만 클래스를 작성하지 않고 사용 가능 Hook이란? 특별한 함수. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줌 언제 Hook 사용? 함수 컴포넌트 안에 state를 추가하고 싶을 때 state 변수 선언 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를..

📌 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값과 이 값을 ..

이전 내용 복습 [WEB] - [React] 공식 문서 3. 엘리먼트 렌더링 [React] 공식 문서 3. 엘리먼트 렌더링 3. 엘리먼트 렌더링 엘리먼트 React 앱의 가장 작은 단위 일반 객체 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 불변 객체, 엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가 nakyungim.tistory.com UI를 업데이트 하는 한 가지 방법 새로운 엘리먼트를 생성 후 이를 ReactDOM.render()로 전달 렌더링 된 출력값을 변경하기 위해 ReactDOM.render() 호출 5. State와 생명주기 목표 : 1. Clock 컴포넌트를 완전히 재사용하고 캡슐화 하기 2. 컴포넌트가 스스로 타이머 설정 and 매초 스스로 업데이..