[study] Style || 내비게이션 || 리덕스

240111

---

Style

- justifyContent : (좌-우)

컨테이너의 flex direction 방향에 따라 배치되는 flex 적용 대상들의 사이 간격과 주변의 여백을 지정.

부모컨테이너 내의 자식 엘리먼트들의 위치 지정.

컴포넌트들을 진행 방향에 따라서 어떻게 배치할지 지정

- alignItems : (위-아래)

부모 view 컴포넌트에 선언. 

flex가 적용 가능한 자식 요소들에 영향을 미친다.

컴포넌트들을 보조축을 따라 어떻게 배치할지를 지정

- alignSelf : 자식요소에 직접 지정

부모 컨테이너에 지정된 alignItems 속성값을 오버라이드 할 때 사용

---

내비게이션

• 탭 내비게이션
• 스택 내비게이션
• 드로어 내비게이션

# 탭 내비게이션 : 화면의 위나 아래에 탭이 있고, 탭을 누르면 탭과 연결된 화면으로 이동

# 스택 내비게이션 : 현재 화면을 대신해서 다른 화면이 보이는 방식.

화면 이동시 애니메이션 이동 효과를 구현해 넣기도 한다.

# 드로어 내비게이션 : 사이드메뉴 옵션. 

옵션을 누르면 드로어가 닫히고 새 화면으로 이동한다

---

리덕스

리덕스 라이브러리 : 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너

기본적으로 앱에 단 하나밖에 없는 전역 상태 객체(single source of truth, 믿을 수 있는 단일소스)

이 전역 상태 객체는 리액트 네이티브 컴포넌트에서 props로 전달된다.

리덕스 state의 데이터가 변경되면, 변경된 새 데이터가 전체 앱에 props로 전달된다.

 

*어떻게 동작?

—>리액트의 contex라는 기능을 이용.

contex는 전역 state를 만들고 관리하는 메커니즘

 

#context

context는 앱 전체에서 참조할 수 있는 전역변수를 만드는 API

여기서 context를 전달받는 컴포넌트는 context를 만든 컴포넌트의 자식 컴포넌트여야 한다.

Context를 이용하면 props를 사용할 필요가 없다.