React - Hook에 대해 알아보자
·
👨‍💻 Dev Note/React
HooksHook은 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존에 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 또한 기존 라이플사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있기 때문에 컴포넌트를 함수 단위로 잘게 쪼갤 수 있는 이점이 있다. Hook의 사용규칙최상위에서만 Hook을 호출해야 한다. 좀 더 풀어서 이야기 하자면 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다는 뜻이다. 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 호출되는 것을 보장받기 위해서이다.React의 함수형 컴포넌트에서만 Hook을 호출해야하하고, 일..
React 클래스형, 함수형 컴포넌트 차이
·
👨‍💻 Dev Note/React
React Component React의 Component 선언 방식은 두 가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다. 현재 많은 사람들이 함수형 컴포넌트로 개발을 진행하지만 기존에 클래스형 컴포넌트를 개발중이던 곳도 많을 수 있기 때문에 그 프로젝트의 유지보수를 위해서라도 클래스형 컴포넌트에 대한 개념을 알고 있으면 많은 도움이 될 것이다. Class Component VS Functional Component 일반적인 차이점 클래스형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. 임의 메서드를 정의할 수 있다. 함수형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. (16.8 버전이후 제공되는 Hook으로 해결 가능) 클래스형 컴포넌..