React Native

1. justifyContent, alignItems

: 현재 Text 태그의 부모태그인 textContainer 영역

• 텍스트 고유의 영역을 가지고 있기 때문에 flex를 작성하지 않아도 적용이 됐다. 그렇기 때문에 justiftContent, alignItems를 써서 원하는 위치에 위치시킬 수 있다.

textContainer: {
  justifyContent: "center",
  alignItems: "center",
  padding: 15,
},

2. 비구조할당

: 딕셔너리에 있는 값을 따로 변수로 만들어서 하나씩 할당하여 변수를 작성하는 것이 아니라 구조 자체를 변수 그대로 사용하는 것

3. Component

: UI의 요소들을 재사용이 가능하도록 조각내서 운영하는 기법

• 코드 전체를 감싸고 있는 함수도 컴포넌트라고 불린다.
• 버튼이나 영역을 컴포넌트로 나누면 그 코드들을 여러 페이지에서 사용 가능하다.

4. Props

: 컴포넌트에 데이터를 전달

• key와 value 형태로 전달된다. ( key = value )
• 속성을 부여해준 컴포넌트에서 해당 속성 값을 사용할 수 있다.

5. useState

: 컴포넌트에서 보유되고 관리되는 데이터

• useState로 생성되고, setState로 변경 가능하다.
• 상태 데이터가 변경되면 화면이 바뀐다.

const [state,setState] = useState([])

6. useEffect

: 화면이 그려진 후 가장 먼저 실행되는 함수

• 데이터를 서버나 다른 곳에서 받은 후 state에 반영한다.
• 화면이 그려진 후, 서버에게 필요한 데이터를 요청받고 화면을 다시 그릴 때 주로 사용된다.

  useEffect(()=>{

  ...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간

  },[])

7. Loading Page

• 화면이 그려지고 난 후, 상태값이 채워지고 변경되기 전까지 로딩화면이 그려진다.
  

8. 카테고리 기능

• 하단의 데이터가 카테고리에 맞게 다시 재정렬되는 기능
• 카테고리의 상태가 변경되면
  

9. Stack Navigation

: 컴포넌트를 페이지화 시키고, 페이지들간의 이동을 가능하게 해주는 React Native 라이브러리

• 페이지는 Stack.Screen, 책갈피는 Stack.Navigator로 부른다.
• 최상단 컴포넌트인 App.js에 네비게이션 기능을 달아서 앱 전체에서 페이지 이동이 가능하도록 한다.

9-1. Stack Navigation의 헤더 스타일 변경

• Stack Navigation 라이브러리가 제공해주는 기능을 Stack 객체에 담아 사용한다.
• 사용하기 전 상단에 const Stack = createStackNavigator(); 를 선언한다.
• <Stack.Navigator></Stack.Navigator> 내부에 스타일링 가능한 다양한 옵션들이 있다.

const Stack = createStackNavigator();

...

<Stack.Navigator
    screenOptions={{
      headerStyle: { 
        backgroundColor: "white",
        borderBottomColor: "white",
        shadowColor: "white",
        height:100,
      },
      headerTitleAlign: "left",
      headerTintColor: "#000",
      headerBackTitleVisible: false,
    }} 
  >
    <Stack.Screen name="MainPage" component={MainPage}/>
    <Stack.Screen name="DetailPage" component={DetailPage}/>
</Stack.Navigator>

headerStyle : 헤더의 스타일
headerTitleAlign : 헤더 텍스트의 정렬
headerTintColor : 헤더 텍스트의 글 색상
headerBackTitleVisible : 뒤로가기 Back글자의 사용여부

9-2. 페이지 이동

• Stack.Screen에 등록된 페이지 컴포넌트는 navigaton과 route 객체를 속성으로 받아 사용할 수 있다.

① navigation 객체가 가지고 있는 setOptions와 navigate

navigation.setOptions({
   title:'나만의 꿀팁'
})

navigation.navigate("DetailPage,{ title: title })

setOptions : 제목 설정
navigate : 첫번째 인자는 Stack.Screen에서 name 속성으로 이름을 지정해준 페이지로 이동하고, 두 번째 인자로 객체를 전달하면 이동한 페이지에서 route 객체로 데이터를 받을 수 있다.

② 전달받은 데이터를 받는 route 객체

{
  route : {
    params :{
      title:title
    }
  }
}

비구조 할당 방식으로 route에 params 객체를 이용해 전달되는 데이터를 꺼내서 사용한다.

10. MainPage와 AboutPage, Stack Navigation에 연결하기

11. LikePage 구현