Custom Hook이란? useState()와 같은 내장된 Hook(정규 함수)과 동일하다. 다만, 내부 상태를 설정할 수 있는 로직이 포함된 것 뿐이다. custom hook은 재사용 가능한 함수에 상태를 설정하는 로직을 outsourcing할 수 있는 장점이 있다. 다시 말해, 정규 함수와는 다르게 custom hook은 다른 custom hook을 포함한 다른 react hook들을 사용할 수 있다. useState()나 useReducer()를 통해 관리하는 React state를 활용할 수 있다는 말이다. 이를 통해 다양한 component에서 호출이 가능해지며, 로직 재사용이 가능한 매카니즘이다. 주로, 코드가 중복되는 경우 re-factoring과 함수의 재사용을 위해서 이용된다.일반적인 ..
이번 시간엔 앞서서 미리 봤었던, React hook에 대해서 살펴보자. 해당 문서는 전반적으로 React 공식 문서를 정리한 글이다. Hook이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서는 동작하지 않고 기존에 Class component에서 class 없이 React를 사용할 수 있게 해준다. React에서 제공하는 내장 hook은 단순히 "use"로 시작하는 모든 함수를 말한다. Motivation of Hook React에서 Hook이 나오게 된 계기는 다음과 같다. Component 사이에서 state 로직을 재사용하기 어렵다. 복잡한 compone..
이전 시간에는 event와 그 event가 발생되었을 때, 작동하는 event handler에 대해서 배웠다. event handler를 사용하여 함수를 실행시킬 수는 있지만, 여기에는 한가지 문제가 있다. let title = 'title' ; const clickHandler = () => { title = 'Update!' ; console.log(title) ; } return ( {title} Change Title ); 위와 같이 버튼이 클릭된다면, title이 "Update!"로 변경될까? 그에 대한 답은 "아니다"이다. 실제로는 전혀 변하지 않는다. 그렇다고 해서 함수가 실행되지 않은 것도 아니다. console.log(title) ; // 'Update!' 심지어 title값을 conso..
