리액트 썸네일형 리스트형 [React] Hook(훅) - useState, useEffect, useRef, useReducer 훅(HOOK) 이란? 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 함수형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다 (useState, userEffect 등) 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다 Hook의 규칙 1️⃣ 최상위에서만 Hook을 호출해야 한다 2️⃣ 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 된다 3️⃣이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다 4️⃣ 리액트 함수 컴포넌트에서만 Ho.. 더보기 [React] 리액트의 Components와 props Components ✅ 컴포넌트를 선언하는 방식은 두 가지가 있다 1️⃣ 함수 컴포넌트 2️⃣ 클래스형 컴포넌트 ✅ 컴포넌트는 여러 개일 수 있다 함수 컴포넌트 function Wlecome(props) { return Hello, {props.name} } 클래스형 컴포넌트 - render 함수가 반드시 있어야 함 class Welcome extends React.Component { render () { return Hello, {this.props.name} ; } } 그렇다면 이제 첫 컴포넌트 생성해봅시다! 1️⃣ 파일 만들기 2️⃣ 코드 작성하기 3️⃣ 모듈 내보내기 및 불러오기 src 디렉토리에 MyComponent.js 파일 생성하기 component 폴더 생성 👉 MyComponent.js.. 더보기 이전 1 다음
