concept/React, Redux, RN
-
react hooks : useState, useEffectconcept/React, Redux, RN 2020. 11. 23. 23:21
참고 출처: velopert useState React에서 Functional component와 Class component의 차이점은 Class component는 state를 가지고 있다는 것이 될 것이다. 즉 리액트 16.8 이전 버전에서는 Functional component 에서는 상태를 관리할 수 없었지만, 리액트가 업데이트 되면서 Hooks 라는 기능이 도입된 이후로 부터 Functional component 에서도 상태를 관리할 수 있게 되었다. Functional component에서 Hooks로 상태를 관리할 수 있는 함수가 바로 useState 이다. useState에서는 상태의 기본값을 파라미터로 넣어서 호출한다. 이 함수를 호출하면 배열이 반환되는데 이 때 첫번째 엘리먼트는 현재..
-
리액트 네이티브 문법 React Native syntaxconcept/React, Redux, RN 2020. 8. 28. 14:34
리액트 네이티브를 써보려고 이것저것 시도하다가 뭔가 이상한 점을 발견.. 기존에 쓰던대로 HTML 문법과 React 문법을 쓰니까 자꾸만 Syntax error 가 발생한다. 여러 레퍼런스 코드들을 자세히 살펴보니 import { Text, TextInput, View } from 'react-native'; react-native 모듈에서 import 해주는 컴포넌트들이 따로 있었다. 이 말인 즉슨, 리액트 네이티브에서만 제공하는 태그가 따로 있다는 뜻 같아서 찾아보다가 이런 포스팅을 발견! https://wit.nts-corp.com/2020/03/23/6014 React Native UI 개발 시작하기 최근 React Native로 개발하는 프로젝트의 UI개발을 맡아 진행하였습니다. 컴포넌트나 스타..
-
리액트 네이티브 React Native 란?concept/React, Redux, RN 2020. 8. 28. 13:25
리액트 네이티브란? 페이스북에서 만든 오픈 소스 모바일 애플리케이션 프레임워크 자바스크립트라는 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼 리액트 네이티브를 활용해서 만들어진 앱 페이스북, 에어비앤비, 우버이츠, 인스타그램 등 다양한 앱들이 리액트 네이티브를 통해 구현되었다. (링크 참조) 리액트 네이티브의 장점 ios, 안드로이드를 동시에 개발하기 쉬움 러닝 커브가 낮다 (리액트를 할 줄 안다면 아주 쉽게 개발 가능) 핫 리로드, 라이브 리로드를 활용하면 수정하면 바로 반영된다!! 스타일을 플렉스 기반으로 해놓는 것이 모바일로 오픈하기 수월하다 리액트 네이티브의 단점 유지보수가 힘들다 (프레임워크라서) 아직 출시된지 얼마 안돼서 라이브러리와 레퍼런스가 ..
-
ComponentDidMount 와 render의 차이?concept/React, Redux, RN 2020. 7. 12. 02:07
출처 : zerocho / velopert 각각의 뜻을 먼저 살펴보자면 render 컴포넌트 렌더링을 담당합니다. componentDidMount 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드입니다. 이 안에서 다른 JavaScript 프레임워크를 연동하거나, setTimeout, setInterval 및 AJAX 처리 등을 넣습니다. render은 컴포넌트를 DOM에 부착하는 역할을 한다. 그리고 mount가 완료되고 나면 componentDidMount가 호출된다. 즉, state, context, defaultProps 저장 componentWillMount render componentDidMount 이 순서대로 실행이 된다. 그림으로 보면 이렇다.
-
state 끌어올리기 / props drilling(프로퍼티 내려꽂기)concept/React, Redux, RN 2020. 6. 1. 02:28
State 끌어올리기를 쓰는 이유? : 종종 여러 컴포넌트에서 동일 데이터의 state를 변경해야하는 경우가 생기는데, 이 때 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다. 예를 들어 sprint 파일의 App.js에서 state를 바꾸는 이유는? videoplayer.js와 videolistEntry.js가 만나는 부모 컴포넌트가 App.js이기 때문이다! State 끌어올리기를 쓰는 방법? : event handler를 부모 컴포넌트에서 setState를 사용해서 작성한 후 props로 내려준다! 그래서 그 이벤트가 실제로 실행되는 컴포넌트에서 전달인자로 props를 받아서 이벤트 함수를 실행시켜준다 (ex. onClick) 예를 들어 sprint 파일에서 이벤트에서 인자를 vide..
-
Reactconcept/React, Redux, RN 2020. 6. 1. 02:19
출처 : 코드스테이츠, 생활코딩, velopert What is "React"? 리액트는 UI(유저 인터페이스)를 만들기 위한 자바스크립트 라이브러리 웹사이트를 만드는 것은 결코 단순한 작업이 아니다. 상태를 관리해야할 DOM이 많아지면서 코드가 아주 복잡해져버리는 것이다. 그래서 상태관리를 최소화하고 기능 개발에만 집중할 수 있게 해주는 프레임워크가 나타나게 된다. 예를 들어 angular, Vue, React 등이 있다. Component 이 중에서 React는 Component에 집중하고 있다. 여기서 Component는 하나의 의미를 가진 독립적인 단위 모듈이라고 정의할 수 있는데 이렇게 말하면 너무나 어렵다. 쉽게 말하자면 나만의 HTML 태그(나만의 Component)를 만들 수 있다는 것이다..