Introduction

hook이 hook인지 모르고 써오다가 hook이라는 개념을 만났다.

정리

React Hook

hook이라함은 Class로 선언되는 컴포넌트의 문제점을 해결하기 위해 16.8 React버전에서 나오게 되었다.

React의 특성상 상태값인 state를 사용할 수 밖에 없는데(랜더링 해줘야 반응형 웹이지..) 이러한 상태값에 접근하고, 생명주기 기능을 사용하기 위해서는 class형 컴포넌트만이 이러한 부분이 가능했다.

하지만 이러한 Class형 컴포넌트를 사용하면 코드가 상당히 복잡해지고 길어진다.

따라서 나오게 된 것이 Hook이다.

Hook은 클래스형 컴포넌트에서 사용할 수 없고, 오직 함수형 컴포넌트에서만 사용이 가능하다.

대표적인 예로 useState, useEffect 가 있다.

TodoList

서론

소스코드를 처음부터 끝까지 다시 작성해봤다.
Redux를 아직 사용하지 않다보니, 참조되고 값을 넘기는 부분도 많고, 이렇다보니 소스코드를 모듈화 하기도 힘들었다.

무엇보다 동작과정에서 소스코드 상 흩어져 있는 함수 및 객체를 찾아 이리저리 움직여야 하다니다보니 ...스파게티 코드같이 느껴졌다.

같은 TodoList 기능을 구현하는데, React보다 베이직한 HTML5/CSS/JS가 더 간단하고 단순하게 구현되니 참 아이러니하다..따라서 Redux를 기대해본다..

결과

Github

You can access to whole source code right Here!

참고문헌

JSX 문법