react state producer 상태 생성자라는 뜻으로 리듀스 라는 단어 자체가 줄이다 축소하다 이런 뜻을 가지고 있으므로 여러 액션과 상태값 사이에서 스위치 케이스문으로 액션에 대한 선택지를 줄여 상태를 변화 시킨다. useReducer() hook 함수는 첫번째 인자로 넘어오는 reducer 함수를 통해 컴포넌트의 상태(state)가 행동(action)에 따라 어떻게 변해야하는지를 정의합니다. reducer 함수는 switch 분기문을 이용하면 이해하기 쉽게 작성할 수 있습니다. 복잡한 상태 관리 간단한 상태 관리를 위해서라면 그냥 간단하게 useState() hook 함수를 쓰는 편이 나을 수도 있습니다. 행동의 종류가 늘어나더라도 그에 따라 값이 어떻게 변하는지를 reducer 함수 안에 일..

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다. useEffect(() => { console.log('처음 렌더링시에만 실행됨!!') }, []); 아래 예제와 같이 버튼을 클릭했을때 number의 값이 변화가 생길때에도 실행되게 해보겠습니다. import React, { useEffect, useState } from 'react'; const App = () => { const [number, setNumber] = useState(0); const increase = () => { setNumber(..

react hooks중 하나인 상태 관리 useState 사용하기 import React, { useState } from 'react'; const App = () => { const [number, setNumber] = useState(0); const increase = () => { setNumber(number+1); } const decrease = () => { setNumber(number-1); } return ( {number} +1 -1 ) } export default App

React.forwardRef forwardRef는 부모 컴포넌트로부터 ref 속성을 받는 한 컴포넌트를 만들고, 그리고 그 속성을 받은 컴포넌트로부터 또 자식에게 그 속성을 또 전달하게 한다. React.useImperativeHandle useRef를 사용하면 컴포넌트의 instance value가 생성된다. 그리고 그 instance value는 DOM 요소를 조작할수 있게 한다. 아래와 같은 예시로 호출 가능 parent.js import React, {useRef} from 'react'; import Child from './child'; const parent = () => { const childRef = useRef(); return ( { childRef.current.showAlert..