React Native 4주차 개발일지

styled-component 사용하기

npm install styled-components

import styled from "styled-components/native"//native component들을 사용하기 때문에 native까지 import한다.

const ButtonContainer = styled.View`
flex-direction:row;
width:100%;
`;

const InputContainer = styled.View`
background-color:${COLOR.RESULT};
min-height: 50px;
justify-content: center;
align-items: flex-end;
padding:10px 5px;
`;

Hook을 사용하여 Logic 부분과 UI부분을 나눌 수 있다.

  //useState는 component 안에서 사용해야 한다.
  const { 
    Input,
    currentOperator,
    result,
    tempInput,
    tempOperator,
    hasInput,
    onPressNum,
    onPressReset,
    OnOperator
  } = useCalculator();//hook은 앞이 use로 시작되는 이름이어야 한다.

{__DEV__&&(
        <>
          <Text>input:{Input}</Text>
          <Text>currentOperator:{currentOperator}</Text>
          <Text>result:{result}</Text>
          <Text>tempInput:{tempInput}</Text>
          <Text>tempOperator:{tempOperator}</Text>        
        </>
      )}
	//개발모드에서만 Text 컴퍼넌트가 보이도록 설정 할 수있다.