[React] 전통적인 Context 이해하기.
·
React/React Basic
Context 리액트의 기본 흐름은 트리 구조이다. 컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다. 최상단 컴포넌트에서 최하위 컴포넌트로 props를 전달하고자 할 때, 중간의 모든 컴포넌트에서 이를 주고 받는 코드들이 포함되어야 한다. 이를 해결하기 위해 존재하는 것이 context이다. Context 정의 Context – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 공식문서에 너무 잘 정리되어있어 이를 보며 이해하는 것이 수월할 것이다. 핵심은 최상단에 context를 선언하는 것. //'light'는 기본 값 const ThemeContext = React.cre..
[React] Hook과 상태관리(useState)
·
React/React Basic
* 이 포스팅은 플러터와 비교하며 작성했으므로, 플러터를 모른다면 불편할 수 있다. 상태관리 플러터를 어느정도로 배웠다면 리액트의 상태 관리 개념은 매우 쉽게 이해할 것이다. 익숙한 setState도 리액트에서 동일한 개념과 명칭으로 사용되며, 클래스에서만 사용가능하다는 점도 동일하다. 플러터에서는 stateful과 stateless 클래스가 기본으로 제공되었다면 리액트에서는 상태가 필요할 땐 클래스를, 상태가 필요하지 않을 때는 function을 사용한다. 하지만 플러터의 그것보다 귀찮고 Stateful Builder처럼 편리한 위젯도 기본으로 존재하지 않는다. 플러터의 Provider와 GetX가 외부 개발자에 의해 개발되고 널리 사용된 것처럼, 리액트에서도 Hook이라는 패키지로 상태 관리가 매우 ..
[플러터] 스크린샷 금지하기
·
Flutter/Flutter Tech
Screenshot disable 은행 앱과 같은 보안 앱이나 주요한 컨텐츠가 있는 경우 앱의 스크린샷을 금지하곤 한다. 네이티브 코드와 연관된 부분이나, 이를 간단하게 할 수 있는 패키지가 존재한다. (네이티브 코드를 사용해도 동일하다) 단, IOS에서는 스크린샷을 금지하는 기능 자체가 불가능하며 스크린샷을 찍는 행위를 감지할 수는 있다. 따라서 스크린샷 금지는 안드로이드에서만 가능하다. 패키지 flutter_windowmanager | Flutter Package A Flutter plugin for manipulating Android WindowManager LayoutParams. pub.dev pubspec.yaml flutter_windowmanager: ^0.0.2 사용법 최상단 위젯의 i..
[플러터] 뒤로가기 버튼/제스쳐 금지
·
Flutter/Flutter Tech
WillPopScope Navigator.pop이 발생함을 감지하는 위젯이다. 스크린 위젯의 최상단에 선언하여 감싸준다. WillPopScope( onWillPop: () { return Future(() => false); //뒤로가기 막음 }, child : ) onWillPop 속성에 위의 예제처럼 Future로 false를 반환하면 소프트키, 물리버튼, 제스쳐를 통한 뒤로가기가 불가능해진다. 뒤로가기 동작시 메시지를 띄우거나 특정 동작을 하고자 할 때 이 속성에 동작을 삽입하면 된다.
[다트/플러터] Get, Set 타입
·
Flutter/Dart
Get/ Set 타 언어와 마찬가지로 Dart에도 get, set이 존재한다. get, set은 일반 변수와 동일한 방식으로 값을 정의하고 참조 할 수 있다. 변수로 취급된다고 볼 수 있으며 따라서 다른 변수 명과 중복될 수 없다. get과 set끼리는 중복이 가능하다. 변수를 정의하고 참조할 때는 해당 행위가 그 변수의 값에만 접근하지만, get, set을 사용하면 변수에 접근함과 동시에 다른 행위도 함께 수행 할 수 있다. 예제 void main() { myClass myclass = myClass('플러터', 1); //get //일반 변수의 형태로 값을 참조한다. print(myclass.name); //set //일반 변수와 동일하게 값을 지정한다. myclass.name = '리액트'; } c..