JSX 란

JSX : 객체 생성과 함수호출을 위한 문법적 편의를 위한 언어

JSX = JavaScript + HTML

특징

(1) 여러개의 요소를 표한할 경우 하나의 부모를 감싸야 한다.

export default function App()  {
  return (
    <View style={styles.container}>
  	<Text>Hello World!</Text>
	<StatusBar style="auto />
    </View>
  );
}

View 와 Fragment

같은 Component 이지만, View에 적용되는 기본 스타일이 사라지므로 모습이 바뀜

null 과 undefined

null : 아무것도 반환하지 않음
undefined : 오류 메세지가 나타남

주석

태그 밖에 있는 주석 : {/* /}
태그 안에 있는 주석 : / */

export default function App() {
  const name = 'hyunmook';
  
  <View style={styles.container}>
    {/* 주석주석주석주석 */}
    <Text /* 주석주석주석 */> Comment </Text>
  </View>
}

스타일링

1. 객체 형태로 입력
2. 카멜표기법으로 작성
   ex) backgroundColor

컴포넌트

재사용이 가능한 조립 블록
화면에 나타내는 UI 요소

내장 컴포넌트

리액트 네이티브에 포함되어 있는 컴포넌트
ex) Button, View 등등

Button 컴포넌트 내에 존재하는 title, onPress 등등 속성

• 각 플랫폼에 따라 약간 다르게 표현됨

커스텀 컴포넌트

Button 컴포넌트 = TouchableOpacity 컴포넌트 + Text 컴포넌트

💡 props 와 state

🔔 props

properties 의 줄임말

부모 컴포넌트로부터 전달된 속성값 혹은 상속받는 속성값

자식 컴포넌트 : 해당 속성을 사용할 수 있지만 변경하는 것은 불가능
부모 컴포넌트 : 해당 속성을 변경 가능

예시코드

<Button title='Button' />

• Button 컴포넌트의 props으로 title 이 전달

• 자식 컴포넌트는 props.title로 호출

• 부모컨포넌트는 const Button = props => {} 를 통해 props를 전달

• OR 연산자 ( || ) 를 통해 자식 속성과, props 중 우선순위를 줄 수 있음

defaultProps

❓ 사용해야 하는 값이 props로 전달되지 않을 수도 있음
❓ 빈 화면이 적용될 수 있음

❗ 사용할 기본값을 defaultProps로 지정

MyButton.defaultProps = {
  title: 'Button',
}

propTypes

❓ 잘못된 타입을 전달하거나, 필수로 전달해야 하는 값을 전달하지 않을 수 있음

❗ 잘못된 props가 전달되었다고 경고메세지를 통해 알림

MyButton.propTypes = {
  title: PropTypes.string/*props의 타입을 지정*/.isRequired/*필수 전달 여부를 결정*/,
}

🔔 state

Props : 부모 컴포넌트에서 받은 값을 변경할 수 없음

• 컴포넌트 내부에서 생성되고 값을 변경 가능
• 상태(state) : 컴포넌트 에서 변화할 수 있는 값, 상태가 변하면 컴포넌트는 리렌더링 함

useState

예시 코드

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

부모 컴포넌트에서 위에 예시 코드 형태로 자식 컴포넌트에 전달

❗ useState는 상태를 관리하는 변수 / 변수를 변경할 수 있는 세터 함수를 반환

• useState 함수를 호출할 때 파라미터에 생성되는 상태의 초깃값을 전달
• 자식 컴포넌트에서는 세터함수에 대한 정의가 필요함

여러개의 useState

const Counter = () => {
   const [count, setCount] = useState(0);
   const [double, setDouble] = useState(0);
  
  return(
    ...
      <Text style={{ fontSize: 30, margin: 10}}> count: {count}</Text>
      <Text style={{ fontSize: 30, margin: 10}}> double: {double}</Text>

      <MyButton
        title="+"
        onPrestt={() => {
        setCount(count + 1)
        setDouble(count + 2)
        }}>
    )
    ...
}

이벤트

Press 이벤트

onPressIn : 터치가 시작될때 항상 호출
onPressOUt : 터치가 해제될때 항상 호출
onPress : 터치가 해제될때 onPressOut 이후 호출
onLongPress : 터치가 일정 시간 이상 지속되면 호출 delaylongPress 로 호출 시간 조절

change 이벤트

• onChange 속성 : TextInput 컴포넌트에 입력된 텍스트가 변경될 때 호출

전달되는 인자

{
  ....
  "nativeEvent": {
    "eventCount": ,
    "target": ,
    "text",
  },
}

필요한 인자를 확인 후 사용

예시 코드

const [text, setText] = useState('')
const _onChange = event => setText(event.nativeEvent.text);

return(
...
<Text> text: {text} </Text>
<TextInput
  onChange={_onChange}
/>

Pressable 컴포넌트

✨스타일링

인라인 스타일링

• HTML의 스타일링처럼 컴포넌트에 직접 스타일을 입력

<예시코드>

return (
  <View
    style={{
      flex: 1,
      backgroundColor: '#fff',
      ...
    }}
  >
)

❗ 어떤 스타일을 적용하는지 직관적임
❓ 비슷한 역할을 하는 컴포넌트에 동일한 코드가 반복됨
❓ 명확하게 이해하기 어려움

클래스 스타일링

• 스타일시트에 정의된 스타일을 사용 하는 방법 CSS와 방법 유사

<예시코드>

return (
  <View style={styles.container}>
)
...
const styles = StyleSheet.creat({
  container: {
    flex : 1,
    backgroundColor: '#fff',
    ...
  }
  ...
}
)

외부파일을 이용한 스타일링

• 외부파일을 작성 후 사용

<예시코드> styles.js

export const viewStyles = StyleSheet.creat({
  contatiner: {
    flex: 1,
    ...
  }
}
)

import {viewStyles} from './styles';
...

  <View style={viewStyles.container, {color: 'green'} /*혼용가능*/} >

flex

• 각 컴포넌트가 화면에서 얼마의 비율을 차지할지에 대한 값을 결정
• 크기가 고정된 컴포넌트와도 혼용 가능

정렬

• 컴포넌트가 쌓이는 방향을 결정

flexDirection

column: 세로방향으로 정렬 (기본값)
column-reverse: 세로방향 역순 정렬
row: 가로방향으로 정렬
row-reverse: 가로방향 역순 정렬

justifyContent/alignItems

//사진 필요//

//사진 필요//

그림자에 관하여

💎스타일드 컴포넌트

다른 글로 정리 예정