All'alba vincerò

At dawn, I will win!

2024/08/06 2

[React] 상태 업데이트(State update) & 상태 끌어올리기(Lifting state up)

📌 상태 업데이트(State update)상태는 즉시 업데이트 되지 않는다 (= 스냅샷) 👉 렌더링 시점에서 컴포넌트의 상태 값이 즉시 변경되지 않는다 ❌ 상태(state)를 설정하더라도 기존 렌더링의 변수는 변경되지 않으며, 대신 새로운 렌더링을 요청한다. - 다음 렌더링에 대해서만 변경된다. 상태는 불변 데이터(Immutable Data)로 관리된다. - 리액트에서는 상태, 배열, 객체가 변경되면 안된다. ✨불변 데이터와 가변 데이터불변 데이터: 원시형 타입 (String, Number, Boolean, undefined, null, Symbol)가변 데이터: 객체형 타입 (Function, Array, Object) ✅ 상태 업데이트 과정React가 함수를 다시 호출함수가 새로운 JSX 스냅샷 반환..

React 2024.08.06

[React] React Hook(훅) 사용 규칙

📌 React Hook(훅) 사용 규칙 ✅ Hook은 최상위 레벨에서만 호출해야 한다. Hook은 항상 React 함수의 최상위 레벨에서 호출하고, return 이전에 사용해야 한다.  Hook은 React가 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있다. return문, 반복문, 조건문, 이벤트 핸들러, 중첩 함수, try/catch/finally 블록 내부에서 호출 ❌function Counter() { // 함수 컴포넌트의 최상위 레벨에서 사용 const [count, setCount] = useState(0); // ...}function useWindowWidth() { // 커스텀 Hook의 최상위 레벨에서 사용 const [width, setWidth] = useState(w..

React 2024.08.06