작심삼일 개발이야기

여러 컴포넌트를 만들다 보면 반복되는 코드를 발견할 수 있을 것이다. 반복되는 것을 줄여주면 코드가 훨씬 깔끔하고 보기 좋아지기 때문에 커스텀 Hooks를 만들어 보고자 한다. 내가 발견한 반복되는 코드는 GET api 요청하는 로직이다. 주로 api 요청 후 얻어오는 데이터를 사용해서 뷰를 만들어 준다. const [ data, setData ] = useState(''); const getData = async () => { try { const res = await axios.get('url 주소'); setData(res); } catch(err) { console.log(err) } }; useEffect(() => { getData(); }, []); 위의 코드처럼 getData함수를 이용해서..

useState와 매우 비슷하다. 첫 번째 값은 현재 상태 두 번째 값은 업데이트 함수이다. // 설치 방법 npm install immer use-immer 상태값이 객체일 때 import { useImmer } from 'use-immer'; // 상태값이 객체일 때 function App() { const [person, updatePerson] = useImmer({ name: "suhyeok", age: "27" }); const updateName = (name) => { updatePerson(draft => { draft.name = name; }); } const plusAge = () => { updatePerson(draft => { draft.age++; }); } } 상태값이 배열..

useRef가 내가 모르는 기능을 가지고 있다는 얘기를 듣고 검색해보고 적는다.. 끄적끄적 모르는 게 끝이 없다.... 클래스형 컴포넌트와 함수형 컴포넌트에서 사용법이 조금 다르다. 함수형만 사용해보아서 함수형으로 정리를 해보았다. ref에 대해 (소소하게) 정리한 글도 있으니 참고. ref란? useRef에서 Ref가 궁금하다. useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 아아 공부하기 싫다 ~ 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한 choisuhyeok.tistory.com 기능 1. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 준다. export default func..

리듀서는 현재 상태, 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때 불변성을 꼭 지켜야 한다. // 리듀서 함수 const reducer = (state, action) => { switch (action.type) { case 'PLUS': return { value : state.value + 1}; case 'MINUS': return { value : state.value - 1}; defatul: return state; } } // 액션 값 { type : 'PLUS' } useReducer에서는 type이 없어도 되고 객체가 아니어도 된다. 사용법 const Counter = () => { const [state, dispatch] = useRe..