React

useState

state 연습

클래스 컴포넌트 라이프 사이클

useMemo : 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. useState: 가변적인 상태를 지닐 수 있게 해준다. useReducer: 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용한다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달 받아 새로운 상태를...

React Native 는 CSS를 지원하지 않지만 Reac Native 스타일링은 CSS의 영향을 받아 만들어졌다. (유사한 프로퍼티의 이름과 값을 사용) 대신,인라인 스타일(Inline Style)을 추가해서 스타일 객체를 프로퍼티로 전달하거나 별도의 객체를 정의해서 그걸 프로퍼티로 전달한다. 스타일은 JavaScript에서 정의하지만 CSS의 프로퍼...

ScrollView 콘텐츠에 스크롤을 추가할때 유용하다. 예를 들어 기사가 너무 길어 화면에 다 안들어가거나 사용자가 어떤 장치를 이용할 지 모르는 상태에서 기사를 스크롤 할 수 있도록 설정해야 하는 상황에서 사용 전체 UI가 렌더링될 때마다 안에 있는 항목을 전부 렌더링 한다. 즉 모든 자식 항목을 렌더링한다. 성능에 문제가 생김 앱이 느려짐 끝이...

Dimensions ??? JSX코드에서 사용하는 컴포넌트는 아니고 JavaScript 객체라서 styles를 포함한 JavaScript 코드 어디에서나 정보 추출을 위해 사용할 수 있다. 사용법은 react-native 로 부터 Dimensions 을 불러온다. 무슨 정보를 추출할 수 있을까?🤔 기기의 너비와 높이를 추출할 수 있다. (⚠️ 주의...

app.json 에서 기본으로 세로방향으로 고정되어 있는데 이부분을 수정해줘야했다. 방향을 수정하면 앱이 깨지는 현상이 발생한다. 이럴경우 수정해줘야할 부분이 많다. 사용중 방향 전환이 필요할 경우…기기의 방향 변경에 맞게 화면의 방향이 조정되는 반응형 코드를 작성하는 것이 좋은데..

Navigation 이란? 웹 브라우저에서 내비게이션은 URL을 입력해서 특정 페이지에 도달하고 링크를 사용하여 하위 페이지로 이동하는 개념이지만 앱에서는 버튼을 눌러서 한 화면에서 다른 화면으로 이동하거나 이전 화면으로 돌아가는 식 보통 *서드 파티 패키지인 react navigation을 사용한다. 라우팅 및 내비게이션을 추가하기 위해 만들어진 패...

하단 탭 내비게이터 라이브러리 설치 이렇게 사용하면 되고 네이티브 스택 내비게이터와 하단 탭 내비게이터를 같이 사용하고 싶으면 하단 내비를 컴포넌트화 한 이후 App.js 에 넣어주면 된다. App.js 스타일 넣기! 참고 : Create custom bottom tab navigator in React native