Tabbar를 만드는 방법에도 여러가지가 있다. AppBar와 함께 만들 수 있고 TabBar와 TabBarView 위젯으로도 만들 수 있다. 후자의 방법에 대해 알아보자. TabBar & TabBarView class _LibraryPageState extends State with SingleTickerProviderStateMixin { //클래스에 with 해준다. ... } 사용하고자하는 클래스에 TickerProvider를 with 해준다. 간단하게 Animation의 Sync를 맞춰준다고 생각하면 된다. //선언부터 한다 TabController? _tabController; @override initState(){ //정의는 initState 이후에 한다 _tabController = ne..

Navigation bar에서 다른 페이지로 이동시에 화면이 부드럽게 전환되는 애니메이션을 본 적이 있을 것이다. 다른 위젯에서도 이를 적용해보자. PageView //컨트롤러 정의 PageController _pageController = new PageController(initialPage: 0); PageView( physics: NeverScrollableScrollPhysics(), //수동으로 이동이 불가능하도록 함 scrollDirection: Axis.horizontal, //가로로 이동 controller: _pageController, //컨트롤러 children: pages), //List 이래도 되나 싶을 정도로 간단하다. index 변수가 필요 없고 Controller에 의해서 ..

다음 소스는 N번째 피보나치 수를 구하는 C++ 함수이다. 1 2 3 4 5 6 7 8 9 10 11 int fibonacci(int n) { if (n == 0) { printf("0"); return 0; } else if (n == 1) { printf("1"); return 1; } else { return fibonacci(n‐1) + fibonacci(n‐2); } } fibonacci(3)을 호출하면 다음과 같은 일이 일어난다. fibonacci(3)은 fibonacci(2)와 fibonacci(1) (첫 번째 호출)을 호출한다. fibonacci(2)는 fibonacci(1) (두 번째 호출)과 fibonacci(0)을 호출한다. 두 번째 호출한 fibonacci(1)은 1을 출력하고 1을..

리액트에서 객체나 리스트는 항상 불변성이 유지되어야한다. (정말 싫다)spread, map, filter, concat 등 정말정말 불편하다.이를 쉽게 해주는 Immer 라이브러리가 존재한다. 설치$yarn add immer//보통 produce로 사용한다.import produce from 'immer'; 사용const myObject = { index : 1, name : 'park'};//produce 함수를 사용하면 간단히 불변성 유지를 하며 요소의 변경이 가능하다.const nextState = produce(myObject, draft => { draft.index += 1;}); useState와 함께 사용const onClick = useCallback(() => {//useCallb..

[리액트] 전통적인 Context 이해하기. Context 리액트의 기본 흐름은 트리 구조이다. 컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다. 최상단 컴포넌트에서 최하위 컴포넌트로 props를 muhly.tistory.com 오래전 포스팅에서 클래스형 컴포넌트에서 사용하는 방법을 알아봤고, 이번에는 Hook의 형태로 사용하는 방법을 알아보겠다. 리액트의 Context API는 플러터의 provider와 굉장히 흡사하다. 아마, 플러터의 provider가 리액트의 것을 벤치마킹 한 것 같다. 하지만, provider의 값이 변경되어도 notifyListener()와 같은 함수는 동작하지 않는다. 다시 말해 상태 갱신은 별도이다. 따라서 useState나 di..