react 4

[Chakra UI] React 적용

원래 MUI를 작은 프로젝트로 적용해 본 적이 있었는데, 이번에 Chakra UI라는 것을 듣게 되어, 현재 하고 있는 프로덕트에 적용해보려고 한다. (docs만 읽어봤을 때 꽤나 괜찮아 보였다.) Chakra UI 'Ease of Modification' Chakra makes it easier to customize components to be entirely your own - 컴포넌트 커스텀을 보다 더 쉽게 제공한다. Material UI vs Chakra UI Material UI 반응형 스타일들을 제어하기 위해서 별도의 코드가 필요하다. 만약 사용자가 css를 커스텀을 하려면 별도의 코드가 비교적 많이 추가된다. : 즉, 커스터마이징이 적을수록 사용하는 것이 좋다. Chakra UI 기본적으..

개발 공부/웹 2023.04.15

[React Native] 페이지 이동시 뒤로가기 버튼이 없어질 때

이전에 썼던 글의 연장선.. https://sunjung.tistory.com/52 [React Native Navigator] 다른 스택네비게이터의 자식 페이지로 페이지 이동하기 Nesting Navigators 아래 navigator가 있다고 했을 때, StackNavigator 1의 Screen A에서 StackNavigator2의 Screen D로 이동하고 싶다! StackNavigator 1 - Screen A - Screen B StackNavigator 2 - Scree.. sunjung.tistory.com navigation.navigate('StackNavigator2', {screen: 'Screen C', params: userName}); Screen C가 만약 StackNavig..

카테고리 없음 2022.10.09

[React Navigator] Bottom Tab Bar 특정 스크린에 숨기기

const StackNavigator1 = ({navigation, route}: props) => { React.useLayoutEffect(() => { const routeName = getFocusedRouteNameFromRoute(route); if (routeName === "Root" || routeName === undefined) { navigation.setOptions({ tabBarStyle : {display: 'flex' }}); } else { navigation.setOptions({ tabBarStyle : {display: 'none' }}); } }, [navigation, route]); return ( ); }; 가장 첫 번째로 보여줄 Root 페이지를 제외하고 모..

개발 공부 2022.10.09

[React Native Navigator] 다른 스택네비게이터의 자식 페이지로 페이지 이동하기

Nesting Navigators 아래 navigator가 있다고 했을 때, StackNavigator 1의 Screen A에서 StackNavigator2의 Screen D로 이동하고 싶다! StackNavigator 1 - Screen A - Screen B StackNavigator 2 - Screen C - Screen D 단순 페이지 이동 navigation.navigate('Screen D'); 로 작성하면, 네비게이터에 Screen D를 못 찾는다는 오류를 만나게 된다. 해결 방법은 단순하게도, navigation.navigate()를 더 자세하게 작성해주면 된다. navigation.navigate('StackNavigator2', {screen: 'Screen C'}); StackNavi..

개발 공부 2022.10.09