리액트 네이티브(react native)-내가 보려고 만든 레이아웃, 스타일 기타등등 사용법(2탄)

<> 부문.(이걸 뭐라고 불렀더라,,)

• < TouchableOpacity/ >: 버튼과 비슷한 기능
  *button컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리에 어려움이 있다. 때문에 이 컴포넌트를 더 자주 사용한다.
• < icon/ >: 아이콘을 설정해준다.
• : 글자를 입력할 수 있는 공간을 만들어준다.
• < ScrollView >< /ScrollView > : 스크롤바를 만들어줌

<>의 세부 설정을 도와주는 아기들

• contentContainerStyle: 스크롤 뷰를 만들 때, 컨텐츠의 내용이 적게 만들어 지더라도 영역을 확보할 수 있도록 도와준다.(내용이 적게 만들어질 때, 스크롤뷰가 영역을 확보할 수 없는 이유: 실제 ScrollView를 사용할 때 ScrollView 내부에 접근할 수 없는 컨테이너가 생성되기 때문)
• placeholder=“문구” : 사용자 입력 전에 표시할 문구
• pacceholderTextColor={‘색상코드’} : 위의 표시 문구의 색상
• autoCorrect={false} : 자동수정 여부를 판단(기본값은 true, false인 경우 자동 수정을 사용하지 않는다. (맞춤법을 고쳐줌!!!!!!)
• onChangeText: 입력받은 데이터를 저장할 수 있도록 도와준다.

• 스타일 두개를 사용하고 싶을 때, style={[styles.name1, styles.name2]}

리액트(또는 자바스크립트)의 기본 문법

(여기부터는 위처럼 그냥 가져다 쓰는 게 아니라 무슨 기능인지 이해하고 응용할 줄 알아야 합니다! 저는 아직 모릅니다!! 그래서 정리만 해놨습니다!!)

• ===: 값과 자료형이 모두 일치해야 함.
• …변수
  :매개변수 앞에 …을 붙이면 모든 후속 매개변수(나머지들)을 배열에 넣도록 지정합니다.
• Math.random(): 0~1구간에서 부동소숫점 난수를 반환한다.
• tostring(): 기존의 타입을 문자열로 변환해준다.

• state(상태): 리액트 컴포넌트에서 동적인 값
  -> 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태를 관리할 수 있어야 함.
  —>> react hooks = 상태를 관리할 수 있게 해줌!

• useState()함수: 대표적인 hooks, 함수형 컴포넌트에서도 상태를 관리할 수 있다

사용법

import React, {useState} from ‘react’;
:리액트에서 useState함수를 불러온다.

const [상태 값을 저장할 변수, 상태 값을 갱신해주는 함수] =useState(상태 초기 값);

*상태 초기 값은 숫자, 문자, 배열 등이 들어갈 수 있다.

• filter()
  :callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능

배열.filter(callbackFunction(요소값, 요소의 인덱스, 사용되는 배열의 객체), filter에서 사용될 this값(선택적으로 사용))

• 구조분해할당(destructuring) 문법
  :배열 또는 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 문법

• map()
  : callbackFunction을 실행한 결과를 가지고 새로운 배열을 만든다.

오늘의 tmi: 해당 글은 체크리스트 어플 만들기 예제를 따라 해보면서 몰랐던 문법을 한줄씩 찾아본 결과이다. 베이스도 전혀 없는 상태에서 해석했기 때문에 아직 이해도, 설명도 부족하기 때문에 이후에 더 세세한 공부가 필요하다.