React - Hooks

※ 공식문서를 읽고 정리한 글입니다. 전에 Thinking in react 게시글에서 FilterableProductTable 컴포넌트 코드를 다음과 같이 작성했었다. 이를 Class를 사용한 컴포넌트로 바꿔보자 작성한 코드를 FilterableProductTab

※ 공식문서를 읽고 정리한 글입니다.출처:https://ko.reactjs.org/docs/hooks-state.html

※ 공식문서를 읽고 정리한 글입니다.출처:https://ko.reactjs.org/docs/hooks-effect.html

※ 공식문서를 읽고 정리한 글입니다.출처:https://ko.reactjs.org/docs/hooks-rules.html

다음과 같은 간단한 코드가 있다 가정해보자. 이 때 5초가 지나면 창 제목을 바꾸고 싶다.또 다른 페이지에서 제목 알고리즘을 재활용하고 싶다. 이 때 Custom Hook을 사용해 문제를 쉽게 해결할 수 있다.useTitle.js우선 사용할 Custom Hook을 제작

JS에서는 getElementById, querySelector 등을 사용해서 직접적으로 DOM을 가져오고는 했음리액트에서 DOM을 직접 조작하고자 하는 경우 reference를 사용하게 됨input에 ref로 inputEl 객체를 전달해 버튼 클릭시마다 focus()

useState를 대체할 수 있는 함수(state, action) => newState의 형태로 reducer를 받고, dispatch 메서드와 짝의 형태로 state를 반환함하위값이 많은 복잡한 static logic을 만드는 경우나 state가 다른 state에 의