Hook

프론트엔드 개발/React

[React] useEffect와 친해지기 (Side Effect)

당신은 리액트를 쓰면서 useEffect를 얼마나 사용하는가? useEffect는 React 컴포넌트에서 side effect를 처리하는데 너무나도 중요하게 사용되는 훅이다. useEffect에 대해서 알아보려면 side effect에 대한 이야기부터 차근차근 밟아가야 한다. Side Effect란? 간단하게 한국어로 번역하면 부수효과라는 뜻으로 함수나 표현식의 실행 결과 외에 발생하는 영향을 말한다. 우리가 일반적으로 프로그래밍을 할 때에는 함수나 표현식의 결과값을 반환하는 것을 기대한다. 하지만 예상한 결과 값 외에도 외부 상태를 변경하거나 다른 부작용을 발생시키는 경우가 있다. 이런 외부 상태의 변경이나 부작용을 Side Effect라고 부른다. 보통 비동기적으로 처리되는 효과들을 Side Effe..

프론트엔드 개발/React

[React] 기본 Hooks

Hook은 최근 리액트 16.8부터 새로 도입된 기술로, Class Component에서만 사용 가능했던 state와 lifecycle을 function component에서도 사용 가능 하도록 제작됐다. 단지 Class component를 function component로 옮기는 것에서 끝난 것이 아닌, 컴포넌트의 state에 관련된 로직을 재사용 할 수 있다는 장점이 있고, 컴포넌트간의 통신을 도우는 Context API등 다양한 발전들이 이뤄졌다. React v.17 이후부턴 리액트가 공식적으로 Class component를 사용하는 것이 아닌, Functional Component를 사용하라고 권장했다. 따라서 외부 라이브러리부터 다양한 프로젝트에서도 Functional component와 ho..

Jongung
'Hook' 태그의 글 목록