Development/React

React - Hook에 대해 알아보자 (1)

Hooks Hook은 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존에 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 또한 기존 라이플사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있기 때문에 컴포넌트를 함수 단위로 잘게 쪼갤 수 있는 이점이 있다. Hook의 사용규칙 최상위에서만 Hook을 호출해야 한다. 좀 더 풀어서 이야기 하자면 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다는 뜻이다. 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 호출되는 것을 보장받기 위해서이다. React의 함수형 컴포넌트에서만 Hook을 호출해야하하고..

리액트 - 컴포넌트 생명주기 (Lifecycle)

라이프사이클 (Lifecycle) 리액트 컴포넌트에는 라이프사이클(생명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전부터 시작하여 페이지에서 사라질 때 끝이 난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전/후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 위와 같은 상황에서 컴포넌트 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 대신 함수형 컴포넌트에는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드의 종류 라이플 사이클 메서드의 종류는 총..

React 클래스형, 함수형 컴포넌트 차이

React Component React의 Component 선언 방식은 두 가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다. 현재 많은 사람들이 함수형 컴포넌트로 개발을 진행하지만 기존에 클래스형 컴포넌트를 개발중이던 곳도 많을 수 있기 때문에 그 프로젝트의 유지보수를 위해서라도 클래스형 컴포넌트에 대한 개념을 알고 있으면 많은 도움이 될 것이다. Class Component VS Functional Component 일반적인 차이점 클래스형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. 임의 메서드를 정의할 수 있다. 함수형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. (16.8 버전이후 제공되는 Hook으로 해결 가능) 클래스형 컴포넌..