개발여행의 블로그

React Hooks는 ReactConf 2018에서 발표된 새로운 기능으로 16.8 버전부터 새로 추가되었다. Hooks를 이용하면 class 없이 state와 여러 React의 기능을 사용할 수 있다. Hooks는 왜 필요한가? Hooks의 등장 배경은 기존 Class Component를 사용할 떄의 불편함과 문제점을 해결하기 위해 개발되었다고 한다. 1. Reusing logic (컴포넌트 간 상태가 있는 logic의 재사용성이 떨어짐) Class component 기반의 React 코드를 작성할 때 어플리케이션을 구성하는 여러 컴포넌트의 재사용성을 위해 Higher-Order Conmonents와 Render props와 같은 패턴을 통해 문제를 해결하였다고 한다. 두 가지 패턴은 특정 상황에 적..

이 글은 Redux 공식 문서를 참고해서 정리한 글입니다. Actions action은 type field를 가지고 있는 plain JavaScript object이다. 단순하게 action은 어플리케이션에서 무언가 일어나는 것을 설명한 이벤트라고 생각할 수 있다. - type field type field는 action을 묘사하는 이름(feature)을 가진 string이어야 한다. 예) "todos/todoAdded" 보통 타입은 "domain/eventName"과 같은 형식으로 사용한다. 첫 번째 부분은 action이 속한 카테고리의 특징을 나타내고, 두 번째 부분은 어떤 것이 발생했는지 구체적으로 나타낸 것이다. - playload action은 무엇이 일어났는지에 대한 추가적인 정보를 담고있는 ..

Hooks의 등장 배경 리액트 hook의 역사는 recompose 라이브러리에서 시작되었다. recompose의 아이디어는 hook과 굉장히 흡사하다. 함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다. 끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다. Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다. https://github.com/acdlite/recompose GitHub - acdlite/recompose: A React utility belt for function components and higher-order components. A React utility..

리액트란? 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. (출처-위키피디아) 리액트는 어떻게 등장했는가? 리액트가 존재하기 전, 이미 많은 라이브러리와 프레임워크들이(Jquery, Backbone, AngularJS 등) 존재했다. 특히 jQuery가 등장했을 때 엄청난 센세이션이었던 것으로 들었다. 수많은 브라우저에 맞춰 ..

React에는 총 9개의 Life Cycle 메서드가 존재한다. 먼저 메서드의 접두사 별로 나눠서 그 차이를 알아보자! will : 작업을 작동하기 전에 실행되는 메서드 did : 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 mount, update, unmount 이렇게 세 가지의 카테고리로 나뉜다. 차례대로 하나씩 알아보자! mount DOM이 생성되고 웹 브라우저 상에 나타나는 것 mount 될 때 호출하는 메서드 ✅ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ✅ getDerivedStateFromProps : props에 존재하는 값을 state에 넣을 때 사용하는 메서드 ✅ render : UI를 렌더링하는 메서드 ✅ componentDidMo..

JSX란? JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App(){ return ( Hello react ); } 위의 코드는 아래와 같이 변환된다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 만약 컴포넌트를 렌더링 할 때 마다 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수..