2차 팀 프로젝트는 React-Native로 당근마켓을 클론 하기로 했다.
아직 React에서도 모르는게 많고 실력도 부족하지만 새로운 것에 도전하는 것은 항상 즐겁다고 생각하는 편이다. 그렇게 시작한 RN.... 하루종일 터미널이 피를 흘린다...ㅠㅠ

초기 세팅

React Native에서 초기세팅은 Navigation 구조를 완성하는 것이었다.

팀원(as 기가장현)과 2일동안 고민하며 만든 구조이다. (사진출처- 장현님 블로그)

React Navigation

아래는 React Navigation 공식문서에서 발췌한 내용이다.

간단히 정리 해 보자면, 웹 브라우저에서 앵커태그(<a>)를 이용해서 링크된 페이지로 이동할 수 있다. 사용자가 해당 링크를 클릭하면 URL이 브라우저 히스토리 스택에 푸시된다. 사용자가 뒤로가기 버튼을 누르면 브라우저가 스택 히스토리 맨뒤에서 pop을 해서 이전 페이지로 돌아갈 수 있는 것이다. React Native 에서는 웹 브라우저 처럼 글로벌 히스토리 스택에 대한 내장된 기능이 없어서 생겨난 것이 React Nativation 이다.

앱 에서는 화면 간의 이동이 화면이 화면위에 쌓이고 뒤로 가기 하면 아래의 화면으로 돌아가는 모양새이다.

그래서 RN에서의 초기세팅은 Navigtion 설계를 하는 것. 즉, 앱 전체 구조를 잡는 것이라고 볼수 있는 것이다.

Hello React Navigation

In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.

React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

Lets start by demonstrating the most common navigator, createStackNavigator.

함수형 컴포넌트, styled-components

import React from "react";
import { StyleSheet, Text, View, Button, Dimensions } from "react-native";
import styled from "styled-components/native";
import { flexRowMarginXView } from "../styles/mixin";

const TownInfo = ({ navigation, route }) => {
  return (
  <Container>
    <InnerContainer>
      <Text>TownInfo</Text>
    </InnerContainer>
  </Container>
  );
};

export default TownInfo;

const Container = styled.View`
  flex: 1;
  background-color: white;
`;

const InnerContainer = styled.View`
  ${flexRowMarginXView}
  background-color: white;
  border-bottom-color: white;
`;

styled-components

일단 styled-components 요녀석은 적용하는데 큰 문제는 없었다. 한줄의 인라인 스타일도 용납하지 않는 관희님의 리뷰들을 보며, ㅂㄷㅂㄷ했지만 결국 당연히 해야할 과정이었으며, 자주쓰는 스타일은 따로 style파일을 만들어서 관리 하고, 필요한 경우엔 상속해서 사용도 가능하단걸 깨달았다.

함수형 컴포넌트

함수형 컴포넌트...ㅋㅋㅋ 뭐, 일단은 그냥 시작해 봤다. 함수는 원래 자주 쓰던 거니까 뭐 어렵지 않겠지? 하고 생각한 나...

예상대로 그냥 함수다. props는 뭐 원래 잘 쓰고 있던거니까 문제 없고, 근데 state 가 어딨지..

useState 란 녀석이 있다. 함수형 컴포넌트를 공부하다 보면 Hooks........?란 녀석과 계속 마주치게 된다.

Hooks 에 대한 내용은 나중에 더 장황하게 정리를 해야 할거 같다.

일단 useState 도 Hooks 중 하나인 것만 알고 넘어가자

import React, { useState } from "react";
{...}
  const [body, setBody] = useState({
    name: "",
    price: "",
    description: "",
    access_range: 1,
  });

  const updateData = (data) => {
    setBody({
      ...body,
      [data.type]: data.value,
    });
  };
{...}

위 코드는 body라는 state를 만들고

현재 컴포넌트의 자식 컴포넌트에서 body를 변경시키기 위해 updateDatad() 함수를 만들었다.

이렇게 함수형 컴포넌트를 시작했다.

하지만 몇일 뒤에 또다른 Hooks들과 마주하는 나,,,

이렇게 자연스럽게 다음 포스팅으로~