1. 프로젝트 생성
- 프로젝트 생성(npx) ---> expo init 폴더명
- src/theme.js 색 정의
- src/App.js App컴포넌트 작성
- root App.js 파일 변경
- src/components 생성
- src/asset 생성 (icon.png, splash.png 파일 넣기)
(src에는 asset, components, theme, app.js 폴더 3개 파일 1개)
npx react-native init MyFirstProject
//npx구나 . npm의 자식같은건데, 더 효율적인 작업을 하도록 나온게 npx 인듯..
<src/ app.js>
1-1 라이브러리 설치
-
npm install @react-navigation/native
-
npm install react-native-gesture-handler
react-native-reanimated
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view -
npm install @react-navigation/stack @react-navigation/bottom-tabs
-
npm install styled-components prop-types
2-1. title 만들기
- (상위 jsx - 우측 정렬로 바꾸고,
text에는 - 글자크기, 굵기, 색깔, align-self, 마진) - view -> SafeAreaView 로 대체 (아이폰 11 노치디자인)
- StatusBar : 속성(backgroundColor, barStyle)
//굵기값에는 '600' 따옴표 필수,
//statusBar가 왜 적용이 안되지?
2-2 input 넣기
- conponents/input.js ->app.js에 컴포넌트 넣기
(가로세로마진패딩, border-radius, 바탕색, 글자색, 글자크기) - dimensions : 현재 기기의 화면크기를 알 수 있고, 동일하게 적용되도록 도와줌. (처음 값이 고정되기때문에, 기기를 회전할때 변경시키려면, 이벤트 리스너를 등록해야해. useWindowDemensions는 rn 훅임.
- TextInput 속성( placeholder, maxLength, width
autoCapitalize ="none, autoCorrect={false}, returnKeyType="done"
//palceholderTextColor 적용하는 것 찾아보기
2-3 아이콘 이미지 넣기
- 구글 머티리얼 디자인 아이콘 참고 ( "file.png" , "file@2x.png" , "file@3x.png" )
- src/images.js에 각 이미지 import 해서, 객체 export 해주기
- src/components/IconButton.js 에 <image source={type} <Pressible에는 onPressOut 이벤트 설정.
// Pressable 컴포넌트는 HitRect 설정 : 클릭 인정범위 넓혀주는 것.
3-1 할일 값 등록하기
-
useState로 input의 값을 받아줄 변수와 함수를 만들어주고,
useState로 기본 Task 목록 있는 변수와 함수를 만들어주고, -
InputText에 onChangeText일때, setState가 일어나게 해주고,
-
InputText에 onSubmitEditing일때, _addTask 함수 실행
1) 새값의 아이디로 쓸 내용 만들어주기 (Date.now() )
2) 새 전체 객체 내용 만들어주기
3) 기존 state에 새로 만든 객체 넣어주기 (둘다 복제해서..
// 왜 복재해야 하지? ) 😡
4) state 비워주기 -
return에서 tasks를 map돌려주는데
1) ScrollView 안에서 돌려주기
2) map 에서 task를 인자로 받아, <Task컴포넌트에 task.text를 props로 내려주기)
3-2 할일 삭제하기
- button컴포넌트에서 onPressOut 이벤트 걸어주고
- App 컴포넌트에서 id값을 받아서 filter 걸어주기
// id를 따로 인자로 보내주지 않아서, 알아서 불러드리나봉가..? - IconButton.js 컴포넌트에서 onPressout, id를 프롭스로 받아 id를 인자로 호출해주는 함수..
