React Hooks를 사용하면 React 클래스 구성 요소를 구축하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 후크를 사용하면 함수 구성 요소로만 완전히 작동하는 React 애플리케이션을 구성할 수 있습니다. 더 이상 class Example extends React.component {}필요하지 않습니다.

기본 후크

일상적인 사용 사례를 위한 일상적인 후크.

React 기본 후크
- useEffect
- useState => 이 기사
- useContext => 출시 예정

useState

useState에 대한 공식 문서

const [state, setState] = useState(initialState);

1. 초기 상태

두 개의 값을 포함하는 배열입니다.

1. 가장 최근 상태
2. 상태를 새 값으로 업데이트하는 기능

useState초기 값을 수락하고 가장 최근 상태와 상태를 업데이트하는 함수의 두 값을 반환합니다. 값은 배열 형식으로 반환되며 일반적으로 배열 구조 분해 구문을 사용하여 읽습니다 .

setState비동기 함수이므로 완료하는 데 시간이 걸릴 수 있다는 점을 염두에 두는 것이 중요합니다. 새 상태에서 이전 상태를 계산해야 하는 경우가 있습니다. 이전 상태를 기반으로 새 상태를 계산하는 것은 반환된 배열의 setState두 번째(javascript 배열에서) 인수에 제공된 메서드 에 함수를 전달하여 수행할 수 있습니다. 와 기능이 매번 동일한 순서로 실행되는지 [1]확인하는 것이 중요합니다 . 및 기능이 동일한 순서로 실행되지 않으면 시간이 매우 나쁠 것입니다(올바른 순서를 수행하는 방법에 대한 자세한 내용은 아래 참조). 함수 순서가 유지되지 않으면 정확한 계산으로 반환됩니다.useStateuseEffectuseStateuseEffect

예

반환 값 이해 useState.

다음 코드는 여러 가지 방법으로 표현할 수 있습니다.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

곰을 황소로 바꾸는 것.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

다음 코드는 이전 상태에 27을 추가합니다.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

상태 변수의 지연 초기화 이해. React Docs 공식 설명.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

개인 웹 사이트
LinkedIn
Instagram