비실이의 개발 성장기

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다. 오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고 이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다. React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다. 화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트에서 런타..

Redux 등장배경facebook에서 react와 함께 소개한 Flux 아키텍쳐를 구현하기 위한 라이브러리컴포넌트 간 state 데이터를 효율적으로 관리하기 위해 등장Flux 와 MVC 패턴의 차이MVC 패턴은 앱의 규모가 커지면 그에따라 Model과 View가 늘어나기에 프로젝트가 복잡해진다.Model과 View가 1:1관계가 아니므로 데이터 관리도 어렵다는 단점이 있다.Flux 특징은 http://2dubbing.tistory.com/26 [flux 아키텍쳐란?] 포스팅 참고Redux는 facebook에서 만든 라이브러리는 아님.Redux는 React에 의존적이지 않음. (React 프로젝트가 아니더라도 Redux 사용이 가능함을 뜻함)React로 개발한 어플리케이션에 새로운 기능을 추가 -> 그만큼..

예전 Spring을 배울때, Singleton과 MVC 디자인패턴을 기본으로 다루고 사용했었다. 이번엔 react.js 다루며 Flux라는 패턴에 대해 알게되었다. Flux 패턴은 react.js 처럼 데이터 흐름이 단방향으로 전달되는 소프트웨어 개발에서 사용된다. 물론 Flux패턴을 사용하지 않아도 개발은 가능하다. 그림 출처 : https://velopert.com/1225 위 처럼 컴포넌트 구조가 있다고 가정하고 빨간색 컴포넌트(하위) 에서 파란색 컴포넌트(상위) 에 선언 되어있는 객체나 함수를 사용하려한다. react.js에서 하위 컴포넌트로 데이터 전달은 props를 사용하는데 파란색 컴포넌트에서 빨간색 컴포넌트로 바로 접근이 불가능하다. 중간에 있는 컴포넌트에서 받은 뒤, 다시 빨간색 컴포넌트..

react에서 render()의 return문 안에서 if와 같은 조건문은 사용이 안되기에 삼항연산자를 사용했다. 그러나 map의 내부라면 if나 for문은 사용 가능하다. react에서 하위 컴포넌트로 데이터를 내려주려면 props를 사용한다. 하위컴포넌트에서 상위컴포넌트의 값을 변경하고 싶다면, 상위컴포넌트에서 함수를 생성한다.(바인딩 필수) 해당 함수를 props로 내려줘서 하위 컴포넌트에서 전달받은 함수를 사용하여 데이터 변경이 가능하다. 허나 flux, reflux, redux 라이브러리를 사용해서 단방향 데이터를 효율적으로 제어할 수 있다.(현재는 mobx도 추가되었다.) Action 과 Store로 나눌 수 있는데, Action은 어떠한 액션(기능)을 사용할 것인지 정의 해 놓는 곳. Sto..